React.js配列のオブジェクトプロパティのsetState

Question

今、私はステートのオブジェクト配列のプロパティ値を増減する必要があります。私はsetStateに私の心に来たすべてを投げてみました。時には、それはすべてのエラーを投げるいませんでしたが、どちらかの値を更新していなかった今、私はエラーメッセージを取得：

this.state.productsを[キー]は未定義です

constructor(props) { 

    super(props) 

    var products = [ 
     { name: "Motorhead glasses", price: 300, amount: 1 }, 
     { name: "Judaspriest glasses", price: 499, amount: 1 } 
    ] 

    this.state = { products: products } 
    this.handleMinus = this.handleMinus.bind(this) 

} 


handleMinus(key) { 
    var stateCopy = Object.assign({}, this.state); 
    stateCopy.products = stateCopy.products.slice(); 
    stateCopy.products[key] = Object.assign({}, stateCopy.products[key]); 
    stateCopy.products[key].amount += 1; 
    this.setState({ [this.state.products[key].amount]: stateCopy }); 
    console.log(this) 
} 

Answer 1

あなたあなた状態オブジェクトのクローンを作成し、あなたはそれを直接変更することができますし、状態

handleMinus(key) { 
    var stateCopy = [...this.state.products]; /Create a copy of products array using spread operator syntax. 
    stateCopy[key].amount += 1; 
    this.setState({products : stateCopy }); 

} 

に後退あなたはこの答えを確認する意味[...this.state.products]何知りたい場合：What is the meaning of this syntax "{...x}" in Reactjs

Answer 2

使用この（コメントを確認してください）：

handleMinus(key) { 
    var stateCopy = Object.assign({}, this.state); 
    stateCopy.products = stateCopy.products.slice(); 
    stateCopy.products[key] = Object.assign({}, stateCopy.products[key]); 
    stateCopy.products[key].amount += 1; 
    this.setState(stateCopy); //use this 
} 

：

は

handleMinus(key) { 
    var stateCopy = this.state.products.slice();  //create a copy of products array 
    stateCopy[key] = Object.assign({}, stateCopy[key]) //create a copy of object at that key 
    stateCopy[key].amount += 1;       //modify the value 
    this.setState({products : stateCopy });    //update the state variable 
} 

また、あなたがstate値を更新するsetStateを使用している方法を変更し、小さな変更で動作しますあなたのコードは、これを使用します

Answer 3

あなたはあなたの状態の不要な浅いコピーを作っています。

handleMinus(key) { 
    const product = this.state.products[key]; 

    this.setState({ 
    products: [ 
     ...this.state.products, 

     [key]: Object.assign({}, product, { 
     amount: product.amount + 1 
     }) 
    ] 
    }) 
}