如何將新元素添加到列表中？

Question

我試圖通過更新一個屬性（id）將數組的新元素添加到列表中。 我想讓它比數組的長度多 1 。 但是我得到了一些奇怪的輸出，添加了每個新的 object。 所有元素都獲得 array.length +1 值。

我用let ， const甚至直接在this.state.produktsToBuy上操作了這個代碼的幾個變體，每次我得到相同的 output

handleAddToShop = (produktToBuy) => {
  const id = this.state.produktsToBuy.length+1;
  produktToBuy.id = id + 1;
  const produktsToBuy = this.state.produktsToBuy;
  produktsToBuy.push(produktToBuy);
  this.setState({produktsToBuy});
};

我應該得到 output 為 1,2,3,4,5,6,7 但最后我得到 7,7,7,7,7,7

Answer 1

確保您沒有直接改變 state。 在 JS 中，對象是一種引用類型。 When you assign this.state.produktsToBuy to const produktsToBuy and push something to produktsToBuy , you're actually pushing to the original this.state.produktsToBuy and you modify the state.

您可以使用擴展運算符 ( ... ) 創建 state ( produktsToBuy ) 的淺表副本：

 class App extends React.Component { state = { items: [ { name: "test item 1", price: 4.99 }, { name: "test item 2", price: 7.99 }, { name: "test item 3", price: 19.99 } ], produktsToBuy: [] }; handleAddToShop = (produktToBuy) => { this.setState((prev) => ({ produktsToBuy: [...prev.produktsToBuy, {...produktToBuy, id: prev.produktsToBuy.length + 1 } ] })); }; render() { return ( <div className="App"> <div style={{ display: "flex" }}> {this.state.items.map((item) => ( <div key={item.name} style={{ border: "1px solid #ccc", margin: "1rem", padding: "1rem", textAlign: "center" }} > <h3>{item.name}</h3> <p>${item.price}</p> <button onClick={() => this.handleAddToShop(item)}>Add</button> </div> ))} </div> <pre>{JSON.stringify(this.state.produktsToBuy, null, 2)}</pre> </div> ); } } ReactDOM.render(<App />, document.getElementById('root'));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>

Answer 2

如果除了 produktsToBuy 之外還有其他東西，您應該維護所有以前的 state。 此外，如果您設置的任何內容都依賴於先前的狀態（通常是這種情況），您總是需要 setState 的功能形式。 而且，就像 Zsolt 所說，你永遠不會直接在 React 中改變 state。 這是我的答案（與@Zsolt Meszaros 非常相似）。 注意： .concat 創建一個新數組，所以我們不必擔心改變原始數組。

handleAddToShop = (produktToBuy) => {
    this.setState((prevState) => {
        const { produktsToBuy } = prevState;
        return {
            ...prevState,
            produktsToBuy: produktsToBuy.concat([
                {
                    ...produktToBuy,
                    id: produktsToBuy.length + 1,
                },
            ]),
        };
    });
};