ReactJS数据/状态更新后父子组件未触发重渲染问题

组件未按预期重渲染是两个React开发中的典型错误导致的：

• 状态更新未变更引用：React对state、props的变更检测基于浅比较，如果你调用setProducts时传入的数组和原有state中的products是同一个内存引用（即productService.getProducts()直接返回了内部存储的原数组，没有创建新的数组副本），React会判定状态无变化，跳过整个组件树的重渲染流程。哪怕数组内部的商品属性已经被修改，只要引用没变，React都不会触发更新。
• 子组件派生状态不同步：你在ProductPreview组件中通过useState(product)将父组件传入的product prop复制到了本地statecurrProduct中，这个初始化逻辑仅会在组件首次挂载时执行一次。后续父组件传入的product prop更新时，本地的currProduct不会自动同步更新，就算父组件完成重渲染，子组件渲染时读取的还是旧的本地状态值。

1. 修正数据源返回逻辑，保证每次返回新引用 #

修改productService的实现，确保getProducts每次调用都返回全新的数组副本，而不是直接返回内部存储的原数组：

// productService 参考实现
let productList = [] // 服务内部存储商品的变量

function getProducts() {
  // 禁止直接 return productList，必须返回新的副本
  return structuredClone(productList)
  // 低版本环境可替换为 JSON.parse(JSON.stringify(productList)) 或逐字段拷贝
}

function increasAmount(productId, diff) {
  // 原有修改数量逻辑保持不变
  const target = productList.find(p => p._id === productId)
  if(target) target.amount += diff
  return target
}

只要保证每次getProducts返回的是新数组，React就能检测到products state的变更，触发父组件重渲染。

2. 移除子组件冗余的本地状态 #

子组件不需要单独存储一份商品状态，所有商品数据统一以父组件的products state为唯一数据源即可，修改后的ProductPreview代码如下：

import { utilService } from '../services/util.service.js'
import { productService } from '../services/product.service.js'

export function ProductPreview({ product, getProducts }) {
    const changeAmount = (diff) => {
        productService.increasAmount(product._id, diff)
        getProducts()
    }
    return (
        <li className="product-preview">
            <img src={product.img} alt="" />
            <h1>{product.name}</h1>
            <h1>{utilService.currencyFormat(product.price)}</h1>
            <div className="actions">
                <button onClick={() => changeAmount(-1)} className="sell">
                    Sell
                </button>
                <p>{product.amount}</p>
                <button onClick={() => changeAmount(1)} className="buy">
                    Buy
                </button>
            </div>
        </li>
    )
}

修改后父组件重渲染时会把最新的product prop传入子组件，子组件直接渲染prop值即可，不会再出现状态不同步的问题。

可选性能优化 #

当前实现每次修改单个商品数量都会全量拉取所有商品数据，数据量较大时会有不必要的性能损耗，可以直接在父组件实现局部更新逻辑，无需每次调用service拉取全量数据：

// 父组件内新增更新方法，替换原getProducts传给子组件
const updateProductAmount = (productId, diff) => {
  setProducts(prevProducts => prevProducts.map(product => {
    if(product._id === productId) {
      // 注意返回新的对象副本，保证引用变化
      return {...product, amount: product.amount + diff}
    }
    return product
  }))
}

这种写法每次更新都会生成新的数组引用和修改对象的引用，React可以精确检测到变更触发重渲染，也不需要额外维护service层的副本逻辑。

内容的提问来源于stack exchange，提问作者Itamar Sahar