REACT 动态复选框答案

【问题标题】：REACT Dynamic checkboxesREACT 动态复选框
【发布时间】：2021-01-10 14:13:59
【问题描述】：

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

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

我的尝试：

console.logs（没有输出）
调试器语句（无暂停）
无法对冻结的页面进行很多操作。

代码：

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}
    </>
  );
}

【问题讨论】：

标签： javascript reactjs checkbox material-ui

【解决方案1】：

解决方案：检查您的循环条件。内循环设置为 i 而不是 j。是的，但我认为该组件不需要有state 各种。

我尝试创建一个。有空的时候可以去下面看看：） https://codesandbox.io/s/stackoverflow-dynamic-checkboxes-5dh08

【讨论】：

【解决方案2】：

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

【讨论】：