复选框状态未在现场更新

Question

保存后，我想根据复选框是否被勾选来继续执行一个功能。如果已勾选复选框，函数应继续保存，否则应显示需要选中复选框的警告。

但是，我的功能不起作用。我注意到，如果我 console.log 来自状态的复选框布尔值，则在我调用函数时状态没有更新。


  const [checkBoxTick, setCheckBoxTick] = useState(false);
  const [checkBoxError, setCheckBoxError] = useState(false);


  const onSave = useCallback(async () => {
    console.log(checkBoxTick);
    if (checkBoxTick) {
        *** go ahead and save ****
    } else {
      setCheckBoxError(true);
    }
  }, []);


  <Checkbox
    label="text here"
    helperText="This field is required"
    error={checkBoxError}
    onChange={() => setCheckBoxTick(!checkBoxTick)}
  />


   <Button color="primary" size="small" onClick={onSave}>
       Save
  </Button>

当我选中复选框（将 checkBoxTick 的状态更改为 true）并按下按钮时，该函数被调用，但 checkBoxTick 的状态为 false，尽管它应该为 true。

我知道这是一个常见的状态问题，整个互联网都在推荐使用 useEffect()，但我不知道如何在我的案例中使用它。

非常感谢任何帮助:)

提前致谢。

Answer 1

UseCallback 正在记录 checkBoxTick 的状态。您需要将变量作为依赖项传递给 useCallback，以便它得到更新，如下所示：

  const onSave = useCallback(async () => {
    console.log(checkBoxTick);
    if (checkBoxTick) {
        *** go ahead and save ****
    } else {
      setCheckBoxError(true);
    }
  }, [checkBoxTick]);

复选框状态未在现场更新

checkbox state is not updating on spot

javascript

typescript

reactjs

use-effect

use-state