React中通过onChange事件处理程序更新对象数组内嵌套对象属性值的问题

问题根源 #

你的代码出现两个核心问题，导致colourScheme被错误添加到外层对象：

1. 数据结构定位错误
   你的原始数据结构是[ { "0": FloorPlan, "1": FloorPlan } ]——数组里仅包含一个外层对象，真正的FloorPlan实例是这个外层对象的属性值。但你在findIndex时，是在数组层面查找i.id，而数组的元素（外层对象）根本没有id属性，这会导致index要么是-1，要么完全找不到正确的目标。

2. 对象更新逻辑错误
   你在splice中使用了{...floorPlans, [property]: e.target.value}，这里floorPlans是整个数组，展开成对象时会把数组的索引作为键（比如0: {...}），再额外添加colourScheme属性，自然就把这个属性挂到了外层对象上，而非嵌套的FloorPlan内部。

修复后的代码 #

假设你使用React状态管理（比如setFloorPlans），以下是修正后的处理函数：

const createOnChangeHandler = (floorPlan: FloorPlan, property: 'colourScheme' | 'type') => (
  e: React.ChangeEvent<HTMLInputElement>
) => {
  // 1. 浅拷贝数组，避免直接修改原状态
  const updatedFloorPlans = [...floorPlans];
  // 获取数组中的外层对象（你的数据结构里数组只有这一个元素）
  const outerContainer = updatedFloorPlans[0];
  
  // 2. 找到目标FloorPlan在外层对象中的键（比如"0"、"1"）
  const targetKey = Object.keys(outerContainer).find(
    key => outerContainer[key].id === floorPlan.id
  );
  
  if (!targetKey) return; // 未找到目标时直接返回，避免错误
  
  // 3. 创建新的FloorPlan对象，更新目标属性
  const updatedItem = {
    ...outerContainer[targetKey],
    [property]: e.target.value
  };
  
  // 4. 更新外层对象，再同步到数组中
  updatedFloorPlans[0] = {
    ...outerContainer,
    [targetKey]: updatedItem
  };
  
  // 5. 更新状态（根据你的状态变量名称调整）
  setFloorPlans(updatedFloorPlans);
};

关键优化点 #

• 正确定位层级：先找到外层对象，再通过id匹配到目标FloorPlan对应的键，确保修改的是嵌套对象。
• 不可变更新：通过展开运算符...创建新的对象和数组，避免直接修改原状态（React状态要求不可变更新）。
• 边界处理：添加了未找到目标时的返回逻辑，防止出现undefined相关的错误。

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