在 React Hooks 中添加扩展运算符时出错

Question

将复选框中选定的 eid 添加到数组时出现错误。这是我在 Acomponent 中的复选框选择。

 const checkBoxSelection = (eID, e) => {
        console.log('eID', eID);
        console.log('e.target.value', e.target.checked);
        if (e.target.checked) {
            setCheckedItems([...checkedItems, eID]);
        } else {
            setCheckedItems((prevState) => [...prevState.filter((item) => item !== eID)]);
        }
    };

复选框在 B 组件中。我正在通过 pops 发送。

<input type='checkbox' onChange={(e) => checkBoxSelection(data.id, e)} />

错误是

 Uncaught TypeError: Invalid attempt to spread non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method

Answer 1

您的 checkedItems 初始值似乎不是 Array 。请确保您将初始值传递为 []

const [ checkedItems, setCheckItems ] = useState([])

也不需要传播从 filter 返回的数组，因为它 returns 是一个新数组。

setCheckedItems((prevState) =>prevState.filter((item) => item !== eID))

在 React Hooks 中添加扩展运算符时出错

Error while adding with spread operator in React Hooks

reactjs

react-hooks

use-state