React如何无需手动设置初始值管理大量动态输入组件的状态

核心思路是用一个对象类型的状态统一存储所有开关的值，key用「类型+唯一ID」的格式生成，不需要手动逐个声明状态。

1. 初始化动态状态 #

直接遍历你的原始数据源data生成初始值，支持批量生成上千个开关的初始状态，不需要手动编写单个状态声明：

import { useState } from 'react';

// 组件内部声明状态
const [toggleStates, setToggleStates] = useState(() => {
  const initialState = {};
  // 遍历所有purposes生成对应开关的初始值
  Object.values(data.purposes).forEach(purpose => {
    const id = purpose.id;
    // Consent开关初始值为你原来写的false
    initialState[`purposesConsent_${id}`] = false;
    // Legitimate interest开关初始值为你原来写的true，ID为1的不需要就跳过
    if (id !== 1) {
      initialState[`purposesLegitimate_${id}`] = true;
    }
  });
  // 有其他类型的动态开关，只需要在这里新增遍历逻辑即可统一生成初始值
  return initialState;
});

2. 编写统一的状态更新函数 #

所有开关共用同一个更新函数，不需要为每个开关单独写处理逻辑：

const handleToggleChange = (toggleData) => {
  // 这里取的参数要和ToggleSwitch组件抛出的参数对应，比如你传的name、dataID、当前checked状态
  const { name, dataID, checked } = toggleData;
  const stateKey = `${name}_${dataID}`;
  setToggleStates(prev => ({
    ...prev,
    [stateKey]: checked
  }));
  // 你原来的sendData逻辑可以放在这里执行，或者提交时统一取整个toggleStates对象
};

3. 修改渲染逻辑绑定状态 #

把原来写死的checked属性改成从状态中取值，同时绑定更新函数：

const displayConsentInfo = () => {
  return (
    <ul>
      <h3>Purposes</h3>
      {Object.values(data.purposes).map((purpose) => (
        <li key={purpose.id}>
            <h5>{purpose.name}</h5>
            <p>{purpose.description}</p>
            <div className={style.consent_box}>
                <span className={style.toggle_option}>Consent</span>
                <ToggleSwitch 
                  checked={toggleStates[`purposesConsent_${purpose.id}`]} 
                  name={'purposesConsent'} 
                  onClick={(checked) => handleToggleChange({
                    name: 'purposesConsent',
                    dataID: purpose.id,
                    checked
                  })}
                  dataID={purpose.id} 
                />
            </div>

            {purpose.id != 1 &&
              <div className={style.consent_box}>
                  <span className={style.toggle_option}>Legitimate interest</span>
                  <ToggleSwitch 
                    checked={toggleStates[`purposesLegitimate_${purpose.id}`]} 
                    name={'purposesLegitimate'} 
                    onClick={(checked) => handleToggleChange({
                      name: 'purposesLegitimate',
                      dataID: purpose.id,
                      checked
                    })}
                    dataID={purpose.id}
                  />
              </div>
            }
        </li>
      ))}
    </ul>
  )
}

额外说明 #

• 如果ToggleSwitch组件的onClick事件本身已经返回了name、dataID、checked属性，直接在handleToggleChange里取值即可，不需要在绑定的时候额外传参。
• 提交数据时直接遍历toggleStates对象即可拿到所有开关的状态，不需要单独获取单个值。
• 后续新增其他类型的动态输入项，只需要在状态初始化时新增对应的遍历逻辑，复用同一个更新函数即可完成管理，不用额外编写重复代码。

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