reactjs - 仅在状态和任何相关效果完成更新后调用函数

Question

我有一个 buttonClick 基本上执行以下操作：

function func() {
      const [bool, setBool] = useState();
      const [data, setData] = useState({});
      
      useEffect(()=>{
        if(bool) {
          setData({bool: true})
        } else {
          setData({bool: false})          
        }
      }, [bool]);
     
      onClick=(evt)=>{
         setBool(true);
         sendToDb(data);
      }
}

我知道 useState 是异步的。有没有办法做出反应，我可以让发送到数据库的调用等到设置数据的 useEffect 完成？

标签： reactjsreact-hooks

Answer 1

只需使用另一个 useEffect 来发送您的数据。

function func() {
      const [bool, setBool] = useState();
      const [data, setData] = useState({});
      
      useEffect(()=>{
        if(bool) {
          setData({bool: true})
        } else {
          setData({bool: false})          
        }
      }, [bool]);

      useEffect(()=>{
        sendToDb(data);
      }, [data]);
     
      onClick=(evt)=>{
         setBool(true);
      }
}