Question

这里数组（布尔值）：

  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

    }

  };

我不明白为什么如果我多次使用setstrong 不起作用，只能多次在else语句中使用一次（行）。谢谢！

Answer 1

setState调用render方法，并且在第一次setState方法调用之后，控件不会返回else块。只需对两个更改使用单个setState方法，例如：

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

Answer 2

问题很简单。

在两个状态更新中的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块中，所有三个状态更新都起作用，因为当它们被批处理时，它们引用了不同的状态更新器

Answer 3

这是您的逻辑的工作代码：

  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和previous状态下实现的目标。如果您解释使用这些状态的目的是什么，也许我也将帮助您解决逻辑问题。谢谢！

setState不更新数组值

3 个答案: