如何在React循环中根据索引i动态调用对应useState的set更新函数

你目前的写法不符合React Hooks的设计逻辑，也不适合动态操作场景，有两种可行的实现方案：

方案1：将离散状态合并为数组（推荐） #

这是最符合React开发规范的方案，后续维护成本最低：

// 声明状态为数组，初始值为4个0
const [hanziList, setHanziList] = useState(Array(4).fill(0));

// 更新逻辑
const batchUpdateHanzi = () => {
  // 先复制原数组做不可变更新
  const newHanziList = [...hanziList];
  for(let i = 0; i < 4; i++) {
    // 按照你的业务逻辑给对应下标的项赋值即可
    newHanziList[i] = tmpData[i].hanzi;
  }
  // 一次性更新状态，避免多次触发渲染
  setHanziList(newHanziList);
}

// 后续取值直接通过下标获取即可，比如hanziList[0]对应原来的hanzi0

方案2：将状态更新函数存入数组（临时兼容方案） #

如果你不想改动现有离散状态的声明，可以用这个方案快速实现：

const [hanzi0, setHanzi0] = useState(0);
const [hanzi1, setHanzi1] = useState(0);
const [hanzi2, setHanzi2] = useState(0);
const [hanzi3, setHanzi3] = useState(0);

// 按顺序把所有更新函数存入数组
const setHanziFns = [setHanzi0, setHanzi1, setHanzi2, setHanzi3];

for(let i = 0; i < 4; i++) {
  // 通过下标获取对应更新函数调用
  setHanziFns[i](tmpData[x].hanzi);
}

注意事项 #

• 不要使用eval拼接函数名的方式实现，会引入安全风险，也会导致React的Hook校验规则失效，容易出现不可预期的bug
• 优先选择数组/对象形式存储同类型的批量状态，更符合React的状态管理最佳实践

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