無法將項目推入狀態內的項目數組

Question

如何將一個項目推到state.items中的項目數組中。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（）但似乎根本不起作用。此外，如何將商品數組作為道具從商品組件傳遞到購物車組件。

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數組（讓items = this.state.items.slice（）;）

Answer 2

您不能直接將其this.state.push為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)} />並遵循Milos給出的代碼即可。 （我希望我可以對第一個答案發表評論，但是我沒有足夠的聲譽）。

而且，addtocart方法已經綁定在構造函數中，因此無需再次綁定它。

Answer 4

由於addtocart已經綁定在構造函數中，因此無需再次綁定它。 因此，如下更新您的代碼。

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

並更新您的addtocart方法，如下所示。 （我在這里使用了閉包概念）

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

或使用以下使用箭頭功能的代碼。

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