React Redux中数组为空时如何通过索引插入或更新数组对象

我来帮你搞定这个问题～你当前的代码之所以不生效，核心原因是当defaultCodeList初始为空数组时，map方法根本不会执行任何遍历，所以触发UPDATE action后，数组还是空的，自然看不到任何变化。

下面给你两种实用的解决思路，都符合Redux的immutable状态更新要求：

方法一：先确保数组长度足够，再替换目标索引元素 #

这种方法先把数组扩展到能容纳目标索引的长度，空位置可以用null或者空对象占位，然后再替换对应位置的元素：

case Actions.UPDATE:
  // 复制原数组，避免直接修改state
  const updatedList = [...state.defaultCodeList];
  const targetIndex = action.index;

  // 如果目标索引超出当前数组长度，填充空值直到数组长度足够
  while (updatedList.length <= targetIndex) {
    updatedList.push(null); // 这里可以换成你需要的默认空结构，比如{}
  }

  // 更新目标索引的元素
  updatedList[targetIndex] = {
    code_sys_id: state.masterName,
    code_sys_cat_id: state.codeSystem,
    [`${state.codeSystem}_description`]: action.description,
  };

  return {
    ...state,
    defaultCodeList: updatedList,
  };

方法二：用Array.from创建新数组（更简洁） #

通过Array.from直接创建一个长度足够的新数组，同时处理原数组已有元素和目标索引的替换：

case Actions.UPDATE:
  const targetIndex = action.index;
  // 确定新数组的最小长度：至少要能容纳目标索引
  const newListLength = Math.max(state.defaultCodeList.length, targetIndex + 1);

  const newList = Array.from({ length: newListLength }, (_, idx) => {
    // 命中目标索引时返回新对象，否则复用原数组元素（没有则用null）
    if (idx === targetIndex) {
      return {
        code_sys_id: state.masterName,
        code_sys_cat_id: state.codeSystem,
        [`${state.codeSystem}_description`]: action.description,
      };
    }
    return state.defaultCodeList[idx] ?? null;
  });

  return {
    ...state,
    defaultCodeList: newList,
  };

关键注意点 #

• 永远不要直接修改Redux state里的原数组，必须通过复制（比如[...原数组]）创建新数组再修改，保证状态的immutable。
• 如果你不想用null占位空位置，可以把填充值换成符合你业务的空对象（比如{}），避免后续渲染时出现异常。

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