Question

我正在尝试一个组件，它本质上是一个应该打开和关闭的“喜欢”按钮，使用 React 和 useToggle，但是它返回 TypeError: Object is not a function or its return value is not iterable。< /p>

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;

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

2 个答案: