Javascript 无法将项推送到状态中的项数组

如何将项目推送到状态中的项目数组。Addcartbutton组件会将新项目添加到state.items。但每次添加新项目时，state.items都不会更新。 `

尝试了这个.state.items.push，但似乎根本不起作用。还有如何将项目数组作为道具从产品组件传递到购物车组件

import React from 'react';

export default class Cart extends React.Component {

    render() {
        let p = this.props.datalist;
        console.log(p);
        return (
            <ul className="collection">
                <li className="collection-item avatar">
                    <img src="#" alt="" className="circle" />
                    <span className="title">dfdfd</span>
                    <a href="#!" className="secondary-content"><i className="material-icons">grade</i></a>
                </li>
            </ul>
        )
    }
}

---

不能像this.state.push那样直接变异，但需要扩展对象

 addtocart(data) {
        console.log(data);
        this.setState(prevState => ({
            items:[...prevState.items, data]
        }))
    }

示例代码：

---

我认为问题在于addtocartbutton组件上的onClick。只需将onClick函数设置为 并遵循米洛斯给出的代码。我希望我能对第一个答案发表评论，但我没有足够的声誉

此外，addtocart方法已绑定到构造函数中，因此无需再次绑定它。

由于addtocart已绑定到构造函数中，因此无需再次绑定它。因此，更新您的代码如下

<Addtocartbutton onClick={this.addtocart(list)} />

或者使用下面使用箭头函数的代码

addtocart = data => () => {
    this.setState(prevState => ({
      items: [...prevState.items, data]
    }));
  };

试试这个，可能会有帮助

addtocartdata{ 控制台日志数据； 让items=this.state.items.slice； 项目数据； 这是我的国家{ 项目：项目 }, => { console.logthis.state.items； }

---

}不工作是没有帮助的。当您尝试时，具体的问题是什么？确切的问题、错误消息等。对于Milos的答案，您需要有适当的插件来传输spread/rest OperatorRevState=this.state.items；this.setStateprevState=>{items:[prevState，data]}是否正确？items数组中只存在一个项。但每次单击后数组仍不会更新。否，因为您正在将旧状态设置为新状态。如果使用的是数组/对象，则需要创建旧状态值的副本。尝试这样的操作.setState{items:this.state.items.slice.concatdata}

addtocart(data) {
  return function() {
    this.setState(prevState => ({
        items:[...prevState.items, data]
    }))
  }.bind(this)  
}

addtocart = data => () => {
    this.setState(prevState => ({
      items: [...prevState.items, data]
    }));
  };