迭代渲染组件时如何实现子组件状态影响同级兄弟组件的渲染

推荐实现：父组件统一维护状态集合 #

因为someArrayWithSeveralElements在组件挂载后不会发生变化，直接在父组件顶层声明一个状态集合存储所有复选框的选中状态即可，完全符合React hook使用规范，也能轻松实现同索引的SomeView和SomeCheckbox状态联动。
完整实现代码如下：

import { useState, useCallback } from 'react';

export default function Parent() {
    // 初始化状态集合，key优先用foo的唯一标识，无唯一标识可用索引（数组固定无风险）
    const [checkedMap, setCheckedMap] = useState(() => 
        Object.fromEntries(
            someArrayWithSeveralElements.map((foo, index) => [foo.id ?? index, false])
        )
    );

    // 复选框切换逻辑，用useCallback缓存避免不必要的重渲染
    const toggleCheck = useCallback((key) => {
        setCheckedMap(prev => ({
            ...prev,
            [key]: !prev[key]
        }));
    }, []);

    const children1 = someArrayWithSeveralElements.map((foo, index) => {
        const key = foo.id ?? index;
        // 可根据需求调整渲染条件，示例为选中时才渲染对应SomeView
        return checkedMap[key] ? <SomeView key={key} foo={foo} /> : null;
    });

    const children2 = someArrayWithSeveralElements.map((foo, index) => {
        const key = foo.id ?? index;
        return (
            <SomeCheckbox 
                key={key}
                checked={checkedMap[key]}
                onChange={() => toggleCheck(key)}
                foo={foo}
            />
        );
    });

    return (<>
        {children1}
        {/*其他组件*/}
        {children2}
    </>)
};

方案优势 #

• 所有hook均在组件顶层声明，完全符合React的hook调用规则，不存在顺序风险
• 状态集中维护，后续如果需要新增全选、反选、批量提交等逻辑，改造成本极低
• 代码可读性强，符合常规React开发范式，后续维护成本低

你之前在循环中声明hook的方案虽然数组固定时可运行，但违反了React的hook使用规则，后续如果数组逻辑调整（比如新增筛选、排序逻辑）很容易出现不可预期的bug，不建议继续使用。

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