代码之家  ›  专栏  ›  技术社区  ›  Ben Fisher

复选框状态未即时更新

  •  0
  • Ben Fisher  · 技术社区  · 3 年前

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

    但是,我的功能不起作用。我注意到如果我安慰。从状态中记录布尔值复选框,在调用函数时状态未更新。

    
      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(),但我不知道如何在我的情况下使用它。

    非常感谢您的帮助:)

    提前谢谢你。

    1 回复  |  直到 3 年前
        1
  •  1
  •   Thales Kenne    3 年前

    UseCallback正在记忆 checkBoxTick .您需要将变量作为依赖项传递给useCallback,以便对其进行更新,如下所示:

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