Material UI Checkbox 在一个实例中重复相同的值两次

Question

使用 React 和 Material UI 复选框

我正在尝试让复选框在选中时将状态更改呈现为特定值。

一切正常，但只有在前 2 次单击复选框时，状态才会正确更新

const [waterChecked, setWaterChecked] = React.useState(true);
const [data, setData] = useState(null);

const handleChangeWater = (event) => {
    setWaterChecked(event.target.checked);
    if (waterChecked) {
      setData([1, 2, 3, 4])
    } else if (!waterChecked) {
      setData([])
    }
  };

<ul>
            <Checkbox
              waterChecked={waterChecked}
              onChange={handleChangeWater}
              defaultChecked={false}
              inputProps={{ 'aria-label': 'controlled' }}
            />
            Water
          </ul>   

在我的 handleChangeWater 函数中放置一个 console.log(waterChcked) 可以授予这些输出。点击 5 次后，我得到：

真、真、假、真、假

它在前 2 次点击后完全按照预期工作，唯一的问题是顺序颠倒了，因为开始时的双真。

例如 7 次单击复选框输出

真、真、假、真、假、真、假

等等。

任何建议将不胜感激，我是新手，所以请原谅任何语法问题。

谢谢！

Answer 1

setWaterChecked(event.target.checked) 异步设置waterChecked 状态。因此，以后不能使用它来设置data 状态。因此，使用event.target.checked 值设置data 状态如下。

const [waterChecked, setWaterChecked] = React.useState(true);
const [data, setData] = useState(null);

const handleChangeWater = (event) => {
    const checked = event.target.checked;
  setWaterChecked(checked);
  if (checked) {
    setData([1, 2, 3, 4]);
  } else {
    setData([]);
  }
};

<ul>
  <Checkbox
    waterChecked={waterChecked}
    onChange={handleChangeWater}
    defaultChecked={false}
    inputProps={{ "aria-label": "controlled" }}
  />
  Water
</ul>;

或者您可以使用useEffect 跟踪waterChecked 状态并对data 状态进行必要的更改，如下所示。

const [waterChecked, setWaterChecked] = React.useState(true);
const [data, setData] = useState(null);

const handleChangeWater = (event) => {
  setWaterChecked(event.target.checked);
};

useEffect(() => {
  if (waterChecked) {
    setData([1, 2, 3, 4]);
  } else {
    setData([]);
  }
}, [waterChecked]);

<ul>
  <Checkbox
    waterChecked={waterChecked}
    onChange={handleChangeWater}
    defaultChecked={false}
    inputProps={{ "aria-label": "controlled" }}
  />
  Water
</ul>;