Javascript concat（）返回一个空数组

我正在使用React 16.10创建一个web应用程序，当我尝试使用

array.concat（）

向空数组添加元素时，首先它返回一个空数组，第二次尝试后，它返回扩展数组

我不使用

Array.push（）的原因如下：


它返回扩展数组的长度


代码如下：

const[pizzas，setPizzas]=useState（[]）；
const addPizza=（类型、大小、面团、价格）=>{
setPizzas（pizzas.concat（[{类型、大小、面团、价格}]）；
控制台日志（pizzas）；
}

单击按钮时会触发
addPizza
功能。当我第一次单击它时，console返回
[]
，但当我第二次单击它时，它返回扩展数组：
[{…}]

奇怪的是，当我尝试在浏览器控制台中执行类似操作时，它工作正常：

const a = [];

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

.concat（）
不修改
数组
；它返回一个包含连接的新数组。因此，此行将在下一次渲染中使用新项目将pizzas状态设置为数组：

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

…因为它可以解释为：

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

…但是您正在记录的本地
pizzas
变量未被修改。下次调用
useState
时，
pizzas
将具有新值。
在React中设置状态是异步的。当您调用从
useState
获得的setter时，您可以保证将来将使用新的更新状态调用该函数

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

这就是状态在react中的工作方式——大概是为了在渲染中创建不变性的伪装