React状态中根据父对象name键向嵌套对象数组添加新对象

原代码问题分析 #

你的代码未生效的核心原因：

• 调用map生成新数组后，没有通过setSemiForm更新React状态，原state未发生变化，UI自然不会更新。
• 没有保存map返回的新数组，仅完成了遍历操作。

针对pri_ingr的修复代码 #

const addPriIngr = (name) => {
  const newPriIngrObj = {
    item_code: '',
    item_description: '',
    start_weight: '',
    left_weight: '',
    actual_qty: '',
    uom: '',
    yield: '',
    strg_container: '',
    cook_vessel: '',
    prepared_by: ''
  };

  // 生成全新的数组副本，不修改原state
  const updatedSemiForm = semiForm.map(item => {
    if (item.name === name) {
      // 复制当前父对象，扩展更新pri_ingr数组
      return {
        ...item,
        pri_ingr: [...item.pri_ingr, newPriIngrObj]
      };
    }
    // 不匹配的父对象直接返回副本
    return { ...item };
  });

  // 调用setState更新状态，触发UI重绘
  setSemiForm(updatedSemiForm);
};

通用嵌套数组添加方法 #

如果要适配pri_ingr、steps、eqp_used等所有嵌套数组，可以封装一个通用函数，通过参数指定目标嵌套数组的key：

const addNestedItem = (parentName, nestedKey, newItem) => {
  // 使用函数式更新，确保获取最新的state值
  setSemiForm(prevSemiForm => {
    return prevSemiForm.map(item => {
      if (item.name === parentName) {
        return {
          ...item,
          // 动态指定嵌套数组key，扩展添加新元素
          [nestedKey]: [...item[nestedKey], newItem]
        };
      }
      return { ...item };
    });
  });
};

通用方法使用示例 #

1. 向指定父对象的pri_ingr添加元素：

const newPriIngr = {
  item_code: '',
  item_description: '',
  start_weight: '',
  left_weight: '',
  actual_qty: '',
  uom: '',
  yield: '',
  strg_container: '',
  cook_vessel: '',
  prepared_by: ''
};
// 替换为实际的父对象name
addNestedItem('SauceRecipe', 'pri_ingr', newPriIngr);

2. 向指定父对象的steps添加元素：

const newStep = { description: '', image: '' };
addNestedItem('SauceRecipe', 'steps', newStep);

3. 向指定父对象的eqp_used添加元素：

const newEqp = { name: '' };
addNestedItem('SauceRecipe', 'eqp_used', newEqp);

关键注意事项 #

• React状态是不可变的，永远不要直接修改state中的对象或数组，必须返回新的副本。
• 使用函数式更新（setSemiForm(prev => ...)）可以避免因闭包导致的 stale state 问题，确保每次更新都基于最新的状态值。

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