时间戳

首页 > 解决方案 > REACT 动态复选框

javascript - REACT 动态复选框

问题描述

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

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

我试过的：

代码：

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

标签： javascriptreactjscheckboxmaterial-ui

解决方案

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

推荐阅读