React JS中如何使用setState更新state内嵌套的productIngredient对象

React中更新嵌套对象/数组类型的state，核心原则是必须创建全新的引用值替换原state，禁止直接修改原state对象，直接原地修改不会触发组件重渲染。

针对你给出的代码场景，以下是具体实现方式： #

推荐写法（函数式setState） #

如果你的新状态依赖旧状态的值，优先使用函数式setState，可避免React批处理机制导致的状态陈旧问题。

示例需求：修改product数组中第1个（下标为0）产品的productIngredient下的quantity值为10，代码如下：

this.setState(prevState => {
  // 拷贝原product数组
  const newProductList = [...prevState.product];
  // 拷贝目标数组项
  const targetProduct = {...newProductList[0]};
  // 拷贝嵌套的productIngredient对象，同时更新指定字段
  targetProduct.productIngredient = {
    ...targetProduct.productIngredient,
    quantity: "10"
    // 其他需要修改的字段可以写在这里
  };
  // 替换数组中对应的项
  newProductList[0] = targetProduct;
  // 返回新的state
  return {
    product: newProductList
  };
})

简化写法（数组map遍历） #

如果需要按条件匹配要修改的项（比如匹配id为0的产品），可以用map方法更简洁的实现：

this.setState(prevState => ({
  product: prevState.product.map(item => {
    // 只修改匹配条件的项，其余项直接复用原引用
    if (item.id !== 0) return item;
    return {
      ...item,
      productIngredient: {
        ...item.productIngredient,
        quantity: "10"
      }
    };
  })
}))

注意事项 #

• 禁止直接原地修改state：例如this.state.product[0].productIngredient.quantity = "10"的写法是错误的，React无法检测到这种引用未变化的修改，不会触发重渲染。
• 不需要修改的层级不需要全量拷贝，未改动的部分可以直接复用原有引用，不影响功能还能提升性能。
• 如果嵌套层级非常深，也可以使用深拷贝工具生成新的对象后再修改，不过要注意全量深拷贝会带来额外的性能开销。

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