状態の変更時に要素が更新されない

Question

WebアプリケーションをReactにしていますが、状態が変わったときに配列をマッピングする際に問題があります。

右は今、何が起こるかである私は、配列quote.productosに製品を追加するアプリケーション製品関数を呼び出すボタンを持っていることを、私は、コンソール上で引用を印刷するたびに、このは（うまく働いていること正しい量の製品がある場合）、この配列をマッピングしてユーザーに表示することができます。このボタンは、初めて使用されたときにのみビューを更新するため、問題はここにあります。

レンダリング：

render() { 
    return ( 

     < div id = "products" > 
      <div className="quoteBG"> 
       <div className="quote"> 
        { this.state.quote.productos.map((objProd) => 
         < div key = {objProd.id} className = "review"> 
           <img src = {objProd.url} /> 
            <h2> {objProd.name}</h2> 
          </div>)} 
       </div> 
      </div> 
      { this.state.products.map(product => 
      <div key = {product.id} className = "product" > 
       <h2> { product.name }</h2> 
       <button className = "addProduct" onClick = {() =>{this.addProduct(product)}} > Add product </button> 
       </div>) 
     } </div>); 
} 
} 

（ヨはクラス名= "引用" の形でdivの下のマップ機能を見ることができます）

人気商品で

addProduct(prod) { 
     const newPro = this.state.quote.productos.concat(prod); 
     this.state.quote.productos = newPro; 
     this.setState(prevState => ({ 
      quote: this.state.quote 
     })); 
     console.log(this.state.quote); 
    } 

を追加します。さらに、関数はクラスのコンストラクタでバインドされます。

this.addProduct = this.addProduct.bind(this); 

（EDIT）だから、何が起こっているかの少しの履歴書をを再開します。私は、ボタンを使用します。オブジェクトが更新されますが、ビュー：ビューは、製品に更新されますが、私はボタン秒の時間を使い、追加変更されません。

Answer 1

React Stateは不変なので、変更することはできません（実際には可能ですが、「変更」として検出されません）ので、「新しい状態」にする必要があります。

あなたのコードは次のようになります。

addProduct(prod) { 
    const newPro = this.state.quote.productos.concat(prod); 
    const quote = Object.assign({}, this.state.quote, {productos: newPro}); 
    this.setState(prevState => ({ 
     quote: quote 
    })); 
    console.log(this.state.quote); 
}