javascript - 无法将项目推送到状态内的项目数组

Question

如何将项目推送到状态内的项目数组。Addcartbutton组件将新项目添加到state.items。但是每次我添加新项目时state.items 未更新。 `

    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() 但似乎根本不起作用。还有如何将项目数组作为 Prop 从产品组件传递到购物车组件。

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

试试这个可能会有帮助

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

方法步骤

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

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

3-数组是 javascript 中的引用类型，要更新状态，您必须传递一个新数组，因此我传递新的 items 数组 (let items = this.state.items.slice();)