setState不更新数组值

这里的阵列 (Boolean)。

  const [state, setState] = React.useState({
    [`${"checkedA"+index}`]: false, //checkedA0
    [`${"checkedB"+index}`]: false, //checkedB0
    [`${"checkedC"+index}`]: false, //checkedC0
    [`${"checkedD"+index}`]: false, //checkeD0

  });

还有问题代码：

    const [countChecked, setCountChecked] = React.useState(0);
    const [previous, setPrevious] = React.useState(0);

    const handleChange = (event) => {


    if(countChecked<1){

      setState({ ...state, [event.target.name]: event.target.checked }); //WORK
      setCountChecked(countChecked+1); //WORK
      setPrevious(event.target.name); //WORK

    }else{

      setState({ ...state, [previous]: false }); //WORKS 
      //setState({ ...state, [event.target.name]: event.target.checked }); //NO WORKS

    }

  };

我不明白为什么如果我用... 多次是不灵只在 else 语句中工作一次(行).谢谢!

2
投票

setState调用渲染方法，控制在第一次调用setState方法后，并没有回到else块。就用一个setState方法来处理这两个变化，比如。

setState({ ...state, [previous]: false, [event.target.name]: event.target.checked });

1
投票

问题很简单

在两个状态更新中的 else 语句中，你传播了之前的状态，并传递了新更新的值。但是你必须知道处理程序中的状态更新是分批的，即如果你多次调用setState，那么所有状态更新的结果都会分批为一个状态，并进行更新

当您对 [previous] 状态会丢失，因为下一次调用状态更新也会传播状态，而且由于状态更新是异步的。state 在

 setState({ ...state, [event.target.name]: event.target.checked });

也将引用任何setState被调用之前的原始状态。

这里的解决方案是在一个单一的setState调用中进行所有的更新，就像

  setState({ 
    ...state, 
   [previous]: false,
   [event.target.name]: event.target.checked 
  });

然而，你必须注意，无论何时，只要你使用以前的状态，就像你上面做的那样，最好使用功能setState，并在使用它们之前存储事件值，因为合成事件会被React重用和无效。

const { name, checked } = e.target;
setState(prevState => ({ 
    ...prevState, 
   [previous]: false,
   [name]: checked 
  }));

在你的if块中，所有三个状态更新都能工作，因为当它们被分批处理时，它们引用了不同的状态更新器。

0
投票

这是你逻辑的工作代码。

  const index = 0;
  const [state, setState] = React.useState({
    [`${"checkedA"+index}`]: false,
    [`${"checkedB"+index}`]: false,
    [`${"checkedC"+index}`]: false,
    [`${"checkedD"+index}`]: false,
  });

  const [countChecked, setCountChecked] = React.useState(0);
  const [previous, setPrevious] = React.useState('');

  const handleChange = (event) => {
    if(countChecked < 1) {
      setState({ ...state, [event.target.name]: event.target.checked });
      setCountChecked(count => count + 1);
      setPrevious(event.target.name);
    } else {
      setState({ ...state, [event.target.name]: event.target.checked });
      setPrevious(false);
    }
  }

  return (
    <div className="membership-all-steps">
      <Checkbox
        name={`${"checkedA"+index}`}
        label="checkedA0"
        onChange={handleChange}
      />
      <Checkbox
        name={`${"checkedB"+index}`}
        label="checkedB0"
        onChange={handleChange}
      />
      <Checkbox
        name={`${"checkedC"+index}`}
        label="checkedC0"
        onChange={handleChange}
      />
      <Checkbox
        name={`${"checkedD"+index}`}
        label="checkedD0"
        onChange={handleChange}
      />
    </div>
  );
}

但我还是不知道你想用这个逻辑达到什么目的 countChecked ＆amp。previous 状态。如果你解释一下你使用这些状态的目的，可能我也会帮你解决你的逻辑问题。谢谢你