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

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,
                },
            ]),
        };
    });
};