如何使用useState钩子编辑动态生成状态的嵌套属性？

核心问题 #

你的代码存在两处关键错误：

1. useEffect中状态初始化方式低效且依赖缺失：循环调用setEditOrders会触发多次状态更新，且依赖数组为空，无法响应order.line_items的变化。
2. 表单输入的状态更新逻辑错误：直接修改状态或错误地将数组当作对象处理，导致状态被破坏，无法正确更新对应项的属性。

修复步骤 #

1. 优化useEffect的状态初始化

将循环调用setEditOrders改为一次性映射数组，同时补充依赖项确保状态能随order.line_items更新：

useEffect(() => {
  if (order.line_items && order.line_items.length) {
    // 一次性生成初始数组，避免多次状态更新
    const initialEditOrders = order.line_items.map(item => ({
      name: item.name,
      price: item.total,
      quantity: item.quantity,
      weight: '',
      unit: 'kg' // 新增单位属性，对应下拉框默认值
    }));
    setEditOrders(initialEditOrders);
  } else {
    setEditOrders([]);
  }
}, [order.line_items]); // 依赖order.line_items，确保数据变化时重新初始化

2. 修复表单输入的状态更新逻辑

React状态是不可变的，必须通过创建新数组/对象来更新嵌套属性，不能直接修改原状态：

重量输入框（MDInput）修改：

<MDInput
  type="text"
  variant="standard"
  label="Gewicht"
  disabled={loading}
  onChange={(e) => {
    const newWeight = e.target.value;
    setEditOrders(prevState => {
      // 复制原数组，创建新数组
      const updatedOrders = [...prevState];
      // 复制对应索引的项，修改weight属性
      updatedOrders[index] = {...updatedOrders[index], weight: newWeight};
      return updatedOrders;
    });
  }}
  value={item.weight}
/>

单位下拉框（Select）修改：

<Select
  value={item.unit} // 绑定状态中的unit属性，而非固定值
  style={{height: 44}}
  label="Einheit"
  endAdornment={
    <InputAdornment position="end">
      <ArrowDropDown fontSize="medium" color="standard"/>
    </InputAdornment>
  }
  onChange={(e) => {
    const selectedUnit = e.target.value;
    setEditOrders(prevState => {
      const updatedOrders = [...prevState];
      updatedOrders[index] = {...updatedOrders[index], unit: selectedUnit};
      return updatedOrders;
    });
  }} 
  disabled={loading}
>
  <MenuItem value="g">g</MenuItem>
  <MenuItem value="kg">kg</MenuItem>
  <MenuItem value="ml">ml</MenuItem>
  <MenuItem value="cl">cl</MenuItem>
  <MenuItem value="l">l</MenuItem>
  <MenuItem value="Stück">Stück</MenuItem>
</Select>

关键说明 #

• 不可变更新：每次状态更新都要创建新的数组和对象，React通过对比新旧状态的引用变化来触发重渲染，直接修改原状态会导致React无法感知变化。
• 依赖数组：useEffect的依赖项必须包含order.line_items，这样当传入的订单商品列表变化时，状态会重新初始化，保持数据同步。
• 避免多次状态更新：一次性映射生成初始数组，减少不必要的组件重渲染，提升性能。

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