reactjs - React useToggle 组件返回 TypeError: Object is not a function or its return value is not iterable

Question

我正在尝试一个组件，它本质上是一个“喜欢”按钮，应该使用 React 和 useToggle 打开和关闭，但是它返回 TypeError: Object is not a function 或其返回值不可迭代。

import React, { useToggle } from 'react';
import ThumbUpIcon from '@material-ui/icons/ThumbUp';

const ThumbUpButton = {
  backgroundColor: 'green',
  border: 'none',
  padding: '5px',
  borderRadius: '5px',
}

const ThumbUp = {
  color: 'white'
}

const Liker = () => {
  const [like, unLike] = useToggle();

  return (
    <div>
      <button style={ThumbUpButton} onClick={unLike}>
        {like ? <ThumbUpIcon style={ThumbUp}/> : <ThumbUpIcon />}
        
      </button>
    </div>
  );
}

export default Liker;

Answer 1

useToggle不是从react. 你有没有把它写在另一个文件中并弄乱了导入，也许？因为这个钩子不是 React 基本钩子

Answer 2

您应该在某处定义挂钩“ useToogle ”，然后在“ Liker ”组件中使用它。

import React, { useState } from 'react';

const ToogleHook = (initValue) => {
    const [value, setValue] = useState(initValue);

    function toogleValue() {
        setValue(!value);
    }

    return [value, toogleValue];
}

const Liker = () => {
    const [like, toogleLike] = ToogleHook(false);

    return <button onClick={toogleLike}>{like ? '' : ''}</button>
}

export default Liker;