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

Question

我正在使用 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'}]

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 将具有新值。