正在将项数组追加到处于React状态的项数组中

Question

我初始化的状态如下：

const [titles, setTitles] = useState([])

我在一个循环中将另一个项目数组data.titles附加到数组titles上，如下所示：

setTitles(titles => [...titles, data.titles])

我也试过这个：

setTitles([...titles, data.titles])

但两者似乎都不起作用，因为当我在循环完成后在控制台中打印titles时，会显示一个空数组。我在这里错过了什么？

Answer 1

在设置新状态时不应该直接使用以前的状态，因为状态更改是异步的。此外，由于您的第二个参数(data.titles(是一个数组，因此您也应该使用排列运算符对其进行迭代。

setTitles(prevState => [...prevState, ...data.titles])

一种更简单的方法是使用数组concat操作符

setTitles((prevState) => prevState.concat(data.titles));