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

Question

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

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

• 它返回扩展数组的长度
• “永远不要突变 this.state，因为之后调用 setState() 可能会替换您所做的突变。将 this.state 视为不可变。”

这是代码：

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

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

单击按钮时会触发addPizza function。 当我第一次单击它时，控制台返回[] ，但是当我第二次单击它时，它返回扩展数组： [{...}] 。

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

const a = [];

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

Answer 1

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

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

...因为它有点转化为：

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

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

Answer 2

在 React 中设置 state 是异步的。 当您调用从useState获得的 setter 时，您得到的保证是将来function 将使用新更新的 state 调用。

它不会更新现有的引用（对pizzas ） - 而是用新的引用调用 function。

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