REACT 动态复选框

Question

目的：我想创建任意数量的行，其中包含任意数量的复选框，这些复选框将由 useState 挂钩处理。

问题：页面变成冻结/持续加载状态，没有任何显示。没有控制台日志，调试器甚至没有启动。 React 通常会防止无休止的更新循环。但是在这种情况下它没有被抓住。

我试过的:

console.logs（没有输出）
调试器语句（无暂停）
不能做很多 bc 的冻结页面。

代码：

const CreateCheckboxes = ({ rows, cols }) => {
  const classes = useStyles()

  const [checked, setChecked] = useState({})
  const [isLoaded, setIsLoaded] = useState(false)

  //temp initializer
  let state = {};

  //configures state based on unique checkbox name.
  const handleChange = (e) => {
    const value = {
      ...checked,
      [e.target.name]: e.target.checked,
    }
    setChecked(value)
  };

  //Helper function
  const createBoxes = (row, col) => {
    let rowArr = [];

    for (let i = 0; i < row; i++) {
      let checkboxArr = []

      for (let j = 0; i < col; j++) {
        checkboxArr.push(
          <Checkbox
            name={`row-${i}-checkbox-${j}`} //unique identifier in the state.
            checked={checked[`row-${i}-checkbox-${j}`]}
            onChange={(e) => handleChange(e)}
          />
        )

        //store temp state so that react useState is given a list of initialized 'controlled' states.
        //react deosnt like undefined states.
        state[`row-${i}-checkbox-${j}`] = false;
      }

      rowArr.push(
        <div className={classes.row}>
          <Typography>{`Sound ${i}`}</Typography>
          {/* JSX array */}
          {checkboxArr}
        </div>
      )
    }

    // JSX array
    return rowArr
  }

  //output as a jsx array of 'x row divs' contiaining 'y checkboxes'
  const sequenceData = createBoxes(rows, cols)

  useEffect(() => {
    setChecked(state)
    setIsLoaded(true)
  }, [])

  return isLoaded && (
    <>
      {sequenceData}
    </>
  );
}

Answer 1

解决方案：检查您的循环条件。内循环设置为 i 而不是 j。

Answer 2

Solution: Check your loop conditions. Inner loop set to i instead of j. yes, but I think that component doesn't need to have state various.

我试着创造了一个。有空可以看下面的:) https://codesandbox.io/s/Whosebug-dynamic-checkboxes-5dh08

REACT 动态复选框

REACT Dynamic checkboxes

javascript

checkbox

reactjs

material-ui