Question

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

我不使用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将具有新值。

Answer 2

React中的

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

它不会更新现有引用（至pizzas），而是使用新引用来调用该函数。

这就是状态的反应方式-大概是在渲染器内部创建了不变性的假装。</ p>

Array.concat（）返回一个空数组

2 个答案: