如何根据获取的对象数量动态生成React状态变量？

我正在写React代码，打算从API获取数据生成对应的复选框组件，目前先用模拟数据测试。目标是让每个复选框能在选中/未选中状态间切换，但状态切换的逻辑传不进去。通常我会定义独立的状态变量，但因为不知道数据的数量，没法提前定义足够的状态变量。

我尝试用布尔值数组toggles来存储每个复选框的状态，长度和模拟数据一致，然后通过索引让每个复选框对应不同的状态，避免同步选中，但代码没达到预期。怀疑addToggle函数有问题，控制台打印toggles始终是[]，也可能整体思路不对。

现有问题代码 #

父组件代码 #

const [toggles, setToggles] = useState([]);

const objects = [
    {
        name: "dummy1"
    },
    {
        name: "dummy2",
    }
]

const addToggle = () => {
    setToggles([...toggles, false]);
    console.log(toggles) // 控制台输出: [], []
}
  
useEffect(() => {
    for (var i = 0; i < objects.length; i++){
        addToggle();
    }
}, []);

// 渲染部分
return (
    {objects.map((object, index) => 
        <Checkbox toggle={toggles[index]} setToggle={setToggles} name={object.name} />
    )}
)

复选框子组件代码 #

function RankingCheckbox({toggle, setToggle, name}) {
    if (toggle)
        return (
            <li className="dropdownItem" onClick={() => setToggle(!toggle)}>
                <span className="checkbox">
                    <AiOutlineCheck />
                </span>
                <span className="itemText">{name}</span>
            </li>
        );
    return (
        <li className="dropdownItem" onClick={() => setToggle(!toggle)}>
            <span className="checkbox" />
            <span className="itemText">{name}</span>
        </li>
    );
}

问题原因分析 #

1. 状态初始化错误：useEffect里循环调用addToggle时，React状态更新是异步的，且addToggle里的toggles是闭包捕获的初始空数组，两次调用都会把toggles设置为[false]，最终数组长度和objects不匹配。
2. 子组件状态修改逻辑错误：子组件直接调用setToggle(!toggle)会把整个toggles数组替换成单个布尔值，而非修改对应索引的元素，导致状态结构完全错误。

修正方案 #

1. 正确初始化状态 #

不需要循环调用addToggle，直接在useState里根据objects的长度生成初始布尔数组。如果后续从API获取数据，就在拿到数据后更新toggles：

// 初始化时直接生成对应长度的false数组
const [toggles, setToggles] = useState(() => Array(objects.length).fill(false));

// 从API获取数据时的示例逻辑
// useEffect(() => {
//   fetch('/api/data')
//     .then(res => res.json())
//     .then(data => {
//       setObjects(data);
//       setToggles(Array(data.length).fill(false));
//     });
// }, []);

2. 父组件传递正确的状态修改函数 #

子组件不直接调用setToggles，而是让父组件提供一个接收索引的切换函数，确保修改数组中对应位置的元素：

父组件渲染部分修改

{objects.map((object, index) => 
  <Checkbox 
    toggle={toggles[index]} 
    onToggle={() => handleToggle(index)} 
    name={object.name} 
  />
)}

// 父组件新增的切换函数
const handleToggle = (index) => {
  // 使用函数式更新，确保获取到最新状态
  setToggles(prevToggles => {
    const newToggles = [...prevToggles];
    newToggles[index] = !newToggles[index];
    return newToggles;
    // 也可用map写法：
    // return prevToggles.map((val, i) => i === index ? !val : val);
  });
}

子组件修改

子组件只需要接收toggle状态和onToggle回调，点击时触发回调即可：

function RankingCheckbox({toggle, onToggle, name}) {
    return (
        <li className="dropdownItem" onClick={onToggle}>
            <span className="checkbox">
                {toggle && <AiOutlineCheck />}
            </span>
            <span className="itemText">{name}</span>
        </li>
    );
}

这样修改后，每个复选框的状态就能独立切换，且状态更新逻辑正确。

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