ReactJS嵌套数组状态管理：实现attributeValue的增删操作

你已经实现了外层filter数组的增删，要处理内层attributeValue的增删，核心是遵循React不可变状态更新原则——不能直接修改嵌套的数组或对象，必须创建副本后修改再更新state。

先修正代码中的语法错误 #

初始state里的attributeValue: ['A', 'B]}缺少一个单引号，修正为：

const [filterData, setFilterData] = useState<Array<filter>>([{attribute: 'Filter 1', attributeValue: ['A', 'B']}]);

实现removeValue（删除指定filter下的attributeValue） #

需要传入两个索引：外层filter的索引，以及要删除的attributeValue的索引，通过不可变方式修改数组：

const removeValue = (filterIndex: number, valueIndex: number) => {
  // 创建外层数组的副本
  const updatedFilters = [...filterData];
  // 复制目标filter并更新其attributeValue数组
  updatedFilters[filterIndex] = {
    ...updatedFilters[filterIndex],
    attributeValue: updatedFilters[filterIndex].attributeValue.filter((_, idx) => idx !== valueIndex)
  };
  // 更新state
  setFilterData(updatedFilters);
};

实现addValue（给指定filter添加attributeValue） #

传入外层filter的索引，给对应filter的attributeValue数组添加新值（这里默认添加空字符串，可按需调整）：

const addValue = (filterIndex: number) => {
  const updatedFilters = [...filterData];
  updatedFilters[filterIndex] = {
    ...updatedFilters[filterIndex],
    attributeValue: [...updatedFilters[filterIndex].attributeValue, '']
  };
  setFilterData(updatedFilters);
};

UI层调用示例 #

渲染时传入对应索引，完成交互逻辑：

{filterData.map((filter, filterIdx) => (
  <div key={filterIdx}>
    <input 
      value={filter.attribute} 
      onChange={(e) => {
        // 额外：修改attribute字段的逻辑（同样遵循不可变原则）
        const updated = [...filterData];
        updated[filterIdx] = {...updated[filterIdx], attribute: e.target.value};
        setFilterData(updated);
      }} 
    />
    <button onClick={() => removeAttribute(filterIdx)}>删除属性</button>
    
    <div>
      {filter.attributeValue.map((value, valIdx) => (
        <div key={valIdx}>
          <input 
            value={value} 
            onChange={(e) => {
              // 额外：修改单个attributeValue的值
              const updated = [...filterData];
              updated[filterIdx] = {
                ...updated[filterIdx],
                attributeValue: updated[filterIdx].attributeValue.map((v, idx) => idx === valIdx ? e.target.value : v)
              };
              setFilterData(updated);
            }} 
          />
          <button onClick={() => removeValue(filterIdx, valIdx)}>删除值</button>
        </div>
      ))}
      <button onClick={() => addValue(filterIdx)}>添加值</button>
    </div>
  </div>
))}

核心逻辑说明 #

• 每次更新嵌套状态时，必须创建对应层级的副本，避免直接修改原state（直接修改会导致React无法检测状态变化，不触发重新渲染）
• 使用扩展运算符...或filter/map等返回新数组的方法，确保每一层都是新的引用

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