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 在反應中的工作方式 - 大概是為了在渲染中創建一個不變的假裝。