React状态更新后UI未渲染求助：重置商品计数无界面更新

核心问题有两个： #

• Product组件未同步props更新：Product组件在挂载时把props的product数据复制到自己的state里，但之后props变化（比如count被重置为0）时，组件不会自动更新自己的state，导致UI停留在旧值。
• 重置操作修改了原状态对象：reset函数里直接修改了原state数组中的商品对象（p.count = 0），虽然用map生成了新数组，但数组里的对象还是原来的引用。React的状态更新依赖浅比较，这种情况下无法检测到对象内部的变化，加上Product组件依赖自身state，最终导致UI不刷新。

修复步骤： #

1. 改造Product组件，直接使用props数据

去掉Product组件自身的state，直接渲染props传递的product数据，这样props更新时会自动触发组件重新渲染：

// Product.jsx
import React, { Component } from 'react';
class Product extends Component {
    render() {
        return (
            <div>
                <span>{this.props.product.name}</span>
                <span>{this.props.product.count}</span>
                <button onClick={()=>this.props.onDelete(this.props.product)}>Delete</button>
            </div>
        );
    }
}
 
export default Product; 

2. 修改reset函数，创建新的商品对象

在重置时，不要修改原state里的对象，而是生成新的对象，确保React能检测到状态变化：

// ShoppingCart.jsx 中的reset方法
reset = ()=>{
    let resetProducts = this.state.products.map((p)=>
        // 生成新对象，不修改原对象
        { return {...p, count: 0} }
    );
    console.log(resetProducts);
    this.setState({products:resetProducts});
}

这样修改后，点击重置按钮时，ShoppingCart的state会更新为包含新对象的数组，Product组件会接收到更新后的props并自动渲染新的count值，UI就能正常同步了。

内容的提问来源于stack exchange，提问作者Gebraiel Malak