如何修改formDataArray对象中数组的值且不覆盖整个对象？

嘿，我一眼就发现问题所在了——你每次执行这段代码的时候，都重新创建了一个全新的formDataArray对象！这就导致之前的修改全被覆盖，根本没法保留下来。

问题根源 #

看你代码里的这行：

var formDataArray = { code: [], desc: [], qty: [], prices: [], line_price: [] };

它被放在了if块的内部，意味着每次触发逻辑时，都会生成一个空的新对象。之前修改过的数组值自然就被清空了，相当于每次都从头开始。

解决方案 #

要让修改持久化，你需要把formDataArray的声明移到这个逻辑的外部，确保每次修改都是基于同一个对象。同时如果需要遵循不可变性原则（比如React状态管理场景），还要注意不能直接修改原数组，而是创建副本更新。

场景1：不需要严格遵循不可变性（普通JS项目）

把变量放在函数外部作为持久化变量，直接修改原数组即可：

// 把变量放在外部作用域，确保不会每次都重置
let formDataArray = { code: [], desc: [], qty: [], prices: [], line_price: [] };

// 把更新逻辑封装成函数
function updateFormData(value, pos, name) {
  if (value && pos && name) { // 先确保参数都有效
    switch (name) {
      case "description":
        formDataArray.desc[pos - 1] = value;
        break;
      case "code":
        formDataArray.code[pos - 1] = value;
        break;
      case "qty":
        formDataArray.qty[pos - 1] = value;
        break;
      case "price":
        formDataArray.prices[pos - 1] = value;
        break;
      case "line_price":
        formDataArray.line_price[pos - 1] = value;
        break;
      default:
        console.log(`Unknown field: ${name}`);
    }
    console.log(formDataArray);
  }
}

场景2：需要遵循不可变性（React等状态管理场景）

如果是在React这类依赖不可变状态的框架中，不能直接修改原对象，需要创建新的对象和数组副本进行更新：

// 假设这是React组件的状态初始化
const [formDataArray, setFormDataArray] = useState({
  code: [], desc: [], qty: [], prices: [], line_price: []
});

function updateFormData(value, pos, name) {
  if (value && pos && name) {
    setFormDataArray(prevState => {
      // 先复制原状态对象，避免直接修改
      const newState = { ...prevState };
      
      switch (name) {
        case "description":
          // 复制原desc数组，修改对应位置后替换
          newState.desc = [...prevState.desc];
          newState.desc[pos - 1] = value;
          break;
        case "code":
          newState.code = [...prevState.code];
          newState.code[pos - 1] = value;
          break;
        case "qty":
          newState.qty = [...prevState.qty];
          newState.qty[pos - 1] = value;
          break;
        case "price":
          newState.prices = [...prevState.prices];
          newState.prices[pos - 1] = value;
          break;
        case "line_price":
          newState.line_price = [...prevState.line_price];
          newState.line_price[pos - 1] = value;
          break;
        default:
          // 没有匹配的字段，直接返回原状态
          return prevState;
      }
      
      return newState;
    });
  }
}

为什么要这么做？ #

• 对于普通JS项目：把变量放在外部作用域，避免每次执行逻辑都重置对象，这样修改就能被保留。
• 对于React等场景：不可变性是状态管理的核心原则之一，直接修改原状态会导致框架无法检测到变化，进而不触发重新渲染，出现状态不更新的bug。通过创建副本更新，能确保状态变化被正确追踪。

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