地图不更新状态变化的元素答案

【问题标题】：Map not updating elements on change of state地图不更新状态变化的元素
【发布时间】：2017-09-20 00:00:08
【问题描述】：

我在 React 上做一个网络应用程序，当状态改变时我在映射数组时遇到了一些问题。

现在发生的事情是我有一个按钮，它调用 App product 函数，该函数将产品添加到数组 quote.productos 中，这工作得很好（每当我在控制台上打印 quote 时，它都有正确数量的产品），然后我正在映射这个数组以便我可以将它展示给用户，问题就在这里，因为按钮只更新视图第一次使用。

渲染：

    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下的map函数用className="quote"的形式）

添加产品

  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) Resume 简单介绍一下正在发生的事情：我使用按钮：视图随着添加的产品而更新，我再次使用按钮：对象得到更新但视图没有改变。

【问题讨论】：

标签： reactjs

【解决方案1】：

问题是 React State 是不可变的，所以你不能修改它（实际上你可以，但不会被检测为'change'），所以你需要'new 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);
}

【讨论】：