React Hooks：如何通过循环声明多个状态变量并传递为Props

你写的循环声明方式在React里是行不通的——JS不允许动态声明这类变量名，而且React的状态管理更推荐用**集合（对象/数组）**统一管理同类型的多个状态，而非分散成几十个独立的state变量。以下是两种可行方案：

方案1：用对象存储状态（支持自定义键名） #

如果需要通过processId_1、processId_2这类命名访问状态，用对象统一管理：

import { useState } from 'react';

function ParentComponent() {
  const totalCount = 30;
  // 初始化所有processId为0
  const initialState = {};
  for (let i = 1; i <= totalCount; i++) {
    initialState[`processId_${i}`] = 0;
  }

  const [processIds, setProcessIds] = useState(initialState);

  // 通用更新方法：传入id和新值
  const updateProcessId = (id, newValue) => {
    setProcessIds(prevState => ({
      ...prevState,
      [`processId_${id}`]: newValue
    }));
  };

  // 示例：更新processId_5的值为10
  // updateProcessId(5, 10)
}

方案2：用数组存储状态（按顺序访问更简洁） #

如果不需要自定义键名，仅按顺序访问状态，数组是更简洁的选择：

import { useState } from 'react';

function ParentComponent() {
  const totalCount = 30;
  // 初始化长度为30的数组，所有元素默认值为0
  const [processIds, setProcessIds] = useState(Array(totalCount).fill(0));

  // 通用更新方法：传入索引和新值
  const updateProcessId = (index, newValue) => {
    setProcessIds(prevState => {
      const newState = [...prevState];
      newState[index] = newValue;
      return newState;
    });
  };

  // 示例：更新第3个processId（索引为2）的值为10
  // updateProcessId(2, 10)
}

根据你选择的存储方式，传递逻辑略有不同：

针对对象状态的传递 #

• 传递单个状态：直接传对应键值和专属更新方法

  <ChildComponent
    processId={processIds.processId_3}
    setProcessId={(value) => updateProcessId(3, value)}
  />
  

• 传递全部状态：直接传整个对象和通用更新方法

  <ChildComponent
    allProcessIds={processIds}
    updateProcessId={updateProcessId}
  />
  

针对数组状态的传递 #

• 传递单个状态：直接传对应索引的值和专属更新方法

  <ChildComponent
    processId={processIds[2]}
    setProcessId={(value) => updateProcessId(2, value)}
  />
  

• 传递全部状态：直接传整个数组和通用更新方法

  <ChildComponent
    processIds={processIds}
    updateProcessId={updateProcessId}
  />
  

1. JS语法不支持在循环中动态声明const [xxx, setXxx]这类变量，你的代码会直接报错；
2. 几十个独立state会让组件逻辑极度混乱，难以维护，统一用集合管理更清晰；
3. 批量更新或遍历状态时，集合的操作效率远高于逐个操作独立变量。

内容的提问来源于stack exchange，提问作者Md. Tazimul Islam Raj