Array.concat() 返回一个空数组答案

【问题标题】：Array.concat() returns an empty arrayArray.concat() 返回一个空数组
【发布时间】：2020-02-11 12:43:11
【问题描述】：

我正在使用 React 16.10 创建一个 Web 应用程序，当我尝试使用 Array.concat() 将元素添加到一个空数组时，首先它返回一个空数组，第二次尝试后它返回扩展数组。

我不使用Array.push()的原因：

它返回扩展数组的长度
"Never mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable."

代码如下：

const [pizzas, setPizzas]= useState([]);

const addPizza = (type, size, dough, price) => {
    setPizzas(pizzas.concat([{type, size, dough, price}]));
    console.log(pizzas);
}

单击按钮时会触发addPizza 函数。第一次点击控制台返回[]，第二次点击返回扩展数组：[{...}]。

奇怪的是，当我尝试在浏览器的控制台中做类似的事情时，它可以正常工作：

const a = [];

a.concat({name: 'James'}); // returns [{name: 'James'}]

【问题讨论】：

标签： javascript arrays reactjs concatenation

【解决方案1】：

React 中的设置状态是异步的。当您调用从 useState 获得的 setter 时，您可以保证将来该函数将以新的更新状态调用。

它不会更新现有的引用（到pizzas）——而是用新的引用调用函数。

这就是状态在反应中的工作方式 - 大概是为了在渲染中创建一个不变性的假装。

【讨论】：

【解决方案2】：

.concat() 不会修改Array；它返回一个包含串联的新数组。因此，这一行确实将下一次渲染中的比萨饼 state 设置为包含新项目的数组：

setPizzas(pizzas.concat([{type, size, dough, price}]));

...因为它有点翻译成这样：

const newPizzas = pizzas.concat([{type, size, dough, price}]);
setPizzas(newPizzas);

...但是您正在记录的本地 pizzas 变量没有被修改。但是，下次调用 useState 时，pizzas 将具有新值。

【讨论】：