为什么向 useState 数组添加数字会使其不可迭代，但添加字符串却可以？

Question

我有一个 React 组件，我在其中使用 useState 挂钩来管理数组。最初，我的状态定义如下：

const [rows, setRows] = useState([1]);

当我尝试使用按钮单击将数字附加到数组时：

setRows([...rows, 1])

并迭代

rows

：

rows.map((row) => console.log(row)); 

我遇到一个错误： 类型错误：行不可迭代。

但是，如果我附加一个字符串而不是数字，例如：

setRows([...rows, 'a'])

Answer 1

在react中，当使用

usestate

钩子来管理数组时，你通常希望以不可变的方式更新状态。这意味着您应该创建一个新数组，其中包含现有元素以及要添加的新元素。您在向

usestate

数组添加数字时遇到的问题是“不可迭代”。

正确方法 当你想在状态数组中添加一个元素时，你应该使用

spread operator(...)

。

示例

const [myArray,setMyArray] = useState([]);
//Adding a number
const addNumber = () => {
    setMyArray(prevArray=>[...prevArray,number]);
}