无法将项目推送到州内的项目数组

Question

如何将项目推送到州内的项目数组.Addcartbutton组件将新项目添加到 state.items 。但每次添加新项目时 state.items < / strong>未更新。 `

    import React from 'react';
    import Addtocartbutton from '../component/addcart';
    import Cart from '../component/cartlist';
    export default class Product extends React.Component {

    constructor() {
        super();
        this.state = {
            items: [],
            total: 0,
            currency: 'INR'
        }
        this.addtocart = this.addtocart.bind(this);
    }

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

    render() {
        var list = this.props.dataname;
        return (
            <div className="card hoverable">
                <div className="card-image">
                    <img src={list.image} alt={list.name} className='shop-img' />
                </div>
                <div className="card-content">
                    <span className="card-title blue-text text-darken-2">{list.price}&nbsp;{list.currency}</span>
                    <p>{list.name}</p>
                </div>
                <Addtocartbutton  onClick={this.addtocart.bind(this,list)} />
            </div>
        )
        return(
        <Cart datalist={this.props.items}/>
       )
      };


     }

尝试 this.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>
        )
    }
}

Answer 1

试试这可能会有所帮助

＆＃13;

＆＃13;

addtocart(data) {
    console.log(data);
    let items = this.state.items.slice();
    items.push(data);
    this.setState({
        items:items
    }, ()=> {
      console.log(this.state.items);
    })
    
}

＆＃13;

＆＃13;

＆＃13;

方法步骤

1-首先我从this.state.items.slice（）创建一个新变量，它将返回新的数组实例。

2-只需将数据推入数组并设置项目状态

3-数组是javascript中的引用类型，用于更新必须传递新数组的状态，因此我传递新项数组（let items = this.state.items.slice（）;）

Answer 2

你不能直接变异为this.state.push，但你需要扩展对象

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

示例代码：

Answer 3

我认为问题在于addtocartbutton组件上的onClick。只需将onClick功能作为 <Addtocartbutton onClick={this.addtocart(list)} /> 并遵循米洛斯给出的代码。 （我希望我能对第一个答案发表评论，但我没有足够的声誉）。

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

Answer 4

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

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

并更新您的addtocart方法，如下所示。 （我在这里使用了closure概念）

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

或使用以下使用箭头功能的代码。

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