React嵌套列表函数组件重渲染问题：Checkbox状态不实时更新

问题现象 #

自定义组件CheckboxLabels调用handleCheckboxChange方法后，无法立即获取更新后的checked属性。点击复选框后，只有打开或关闭外层列表时，嵌套复选框的状态才会刷新。

问题根源 #

1. React状态更新机制限制：React通过检测状态的引用变化触发重渲染。当前handleCheckboxChange中直接复用了原checked Map的引用，修改后调用setChecked(newChecked)时，新旧状态指向同一个Map对象，React判定状态未变更，不会触发组件重渲染，导致CheckboxLabels无法拿到最新状态。
2. 未初始化的状态值：checked.get(${table}-${column})可能返回undefined，取反后会得到true，导致复选框状态逻辑异常。

解决方案 #

1. 创建新的Map实例更新状态 #

修改handleCheckboxChange，基于原checked状态创建新的Map实例，修改后再传入setChecked，确保状态引用发生变化：

const handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  const [table, column] = event.target.value.split('-');
  const key = `${table}-${column}`;
  // 创建新的Map实例复制原状态
  const newChecked = new Map(checked);
  // 切换状态，依赖初始化后的默认值避免undefined问题
  newChecked.set(key, !newChecked.get(key));
  setChecked(newChecked);
};

2. 完善状态初始化逻辑 #

在useEffect中遍历所有复选框对应键，初始化为false：

useEffect(() => {
  const initialChecked = new Map<string, boolean>();
  items.forEach(item => {
    Object.keys(item.payload.columns).forEach(table => {
      item.payload.columns[table].forEach(column => {
        const key = `${table}-${column}`;
        initialChecked.set(key, false);
      });
    });
  });
  setChecked(initialChecked);
}, [items])

3. 修正嵌套循环的索引冲突（可选优化） #

原代码中嵌套循环使用了相同的index变量名，可能导致open数组索引错误，建议重命名内部循环索引：

return columnsFT.map(([table, columns]: [string, string[]], tableIndex ) => (
  <Box key={table}>
    <ListItemButton onClick={() => handleClick(tableIndex)}>
      <ListItemIcon>
        <InboxIcon />
      </ListItemIcon>
      <ListItemText primary={table} />
      {open[tableIndex] ? <ExpandLess /> : <ExpandMore />}
    </ListItemButton>
    <Collapse in={open[tableIndex]} timeout="auto" unmountOnExit>
      {/* 其余代码不变 */}
    </Collapse>
  </Box>
))

修改后的完整核心代码片段 #

export default function NestedList({ items }: PropsType) {
  const [open, setOpen] = React.useState([] as boolean[]);
  const [checked, setChecked] = React.useState(new Map() as Map<string, boolean>);

  useEffect(() => {
    // 初始化open状态为对应长度的false数组
    const tableCount = items.flatMap(item => Object.keys(item.payload.columns)).length;
    setOpen(new Array(tableCount).fill(false));
  }, [items])

  useEffect(() => {
    const initialChecked = new Map<string, boolean>();
    items.forEach(item => {
      Object.keys(item.payload.columns).forEach(table => {
        item.payload.columns[table].forEach(column => {
          const key = `${table}-${column}`;
          initialChecked.set(key, false);
        });
      });
    });
    setChecked(initialChecked);
  }, [items])

  const handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const [table, column] = event.target.value.split('-');
    const key = `${table}-${column}`;
    const newChecked = new Map(checked);
    newChecked.set(key, !newChecked.get(key));
    setChecked(newChecked);
  };

  const handleClick = (index: number) => {
    const newOpen = [...open];
    newOpen[index] = !newOpen[index];
    setOpen(newOpen);
  };

  return (
    <List>
      {items.map((item) => {
        const tables = Object.keys(item.payload.columns);
        const columnsForTable = new Map<string, string[]>();
        tables.forEach((table) => {
          columnsForTable.set(table, item.payload.columns[table]);
        });
        const columnsFT = Object.entries(Object.fromEntries(columnsForTable.entries()));
        return columnsFT.map(([table, columns], tableIndex) => (
          <Box key={table}>
            <ListItemButton onClick={() => handleClick(tableIndex)}>
              <ListItemIcon>
                <InboxIcon />
              </ListItemIcon>
              <ListItemText primary={table} />
              {open[tableIndex] ? <ExpandLess /> : <ExpandMore />}
            </ListItemButton>
            <Collapse in={open[tableIndex]} timeout="auto" unmountOnExit>
              <List key={table} component="div" disablePadding>
                <ListItem sx={{ pl: 4 }}>
                  <Box sx={{ display: 'flex', flexDirection: 'column', ml: 3 }}>
                    <CheckboxLabels columns={columns} table={table} checked={checked} handleCheckboxChange={handleCheckboxChange}/>
                  </Box>
                </ListItem>
              </List>
            </Collapse>
          </Box>
        ))
      })}
    </List>
  );
}

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