React中useState初始化对应长度布尔数组失败求助

问题根源 #

1. 组件首次渲染时，Redux中的data还未完成加载，长度为0，导致useState初始化的clicked1/clicked2/clicked3都是空数组。
2. 原useEffect的依赖数组为空，仅在组件挂载时执行一次，此时data大概率还未加载完成，执行setAllStates时仍使用长度为0的数组。
3. 当data后续加载完成（长度变为30），由于useEffect未监听data的变化，不会重新更新状态数组，导致访问clicked1[index]时超出数组长度，返回undefined。

修复方案 #

修改useEffect的依赖项，监听data的变化，确保数据加载完成后同步更新状态数组：

function Datatable() {
  const data = useSelector((state) => state.dish);
  console.log(data.length);
  const [clicked1, setClicked1] = useState([]);
  const [clicked2, setClicked2] = useState([]);
  const [clicked3, setClicked3] = useState([]);
  const dispatch = useDispatch();

  function setAllStates() {
    // 仅当data有有效数据时更新状态数组
    if (data.length > 0) {
      setClicked1(new Array(data.length).fill(false));
      setClicked2(new Array(data.length).fill(false));
      setClicked3(new Array(data.length).fill(false));
    }
  }

  useEffect(() => {
    setAllStates();
  }, [data]); // 监听data变化，数据更新时自动触发

  // ... 其他逻辑代码

  return (
    <TableBody>
      {data.map((row, index) => (
        <TableRow
          key={row.id}
          sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
        >
          <TableCell component="th" scope="row">
            <img width={150} height={100} src={row.image} />
          </TableCell>
          <TableCell align="right">{row.dishName}</TableCell>
          <TableCell align="right">
            {/* 增加空数组判断，避免undefined报错 */}
            {clicked1.length > 0 && clicked1[index] === false ? (
              <Button onClick={() => handleOnclick("Rank 1", index, row)}>
                Rank 1
              </Button>
            ) : (
              <Typography>Selected</Typography>
            )}
          </TableCell>
        </TableRow>
      ))}
    </TableBody>
  );
}

额外优化说明 #

• 初始useState直接设为空数组即可，后续通过useEffect更新，避免首次渲染创建无意义的长度0数组。
• 加入data.length > 0的判断，防止data为空时重复执行空数组赋值。
• 在表格渲染时增加clicked1.length > 0的判断，进一步避免数据未同步时的undefined报错。

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