账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    react hooks 的 useState 如何获取最新的 state?
    47
    0

    直接上代码吧,类似于之前class组件this.setState的第二个callback参数

    import React, { useState, useEffect } from 'react';
    import fetchData from 'services';
    
    function useList() {
      const [params, setParams] = useState({});
      const [data, setData] = useState({});
      const getData = () => {
        fetchData(params).then(res => {
          setData(res);
        });
      };
      useEffect(() => {
        getData();
      }, []);
      return {
        params,
        setParams,
        data,
        setData,
        getData,
      };
    }
    
    function Foo() {
      const { setParams, getData } = useList();
      const handleClick = () => {
        setParams({ mockData: 2333333 });
        // 如何让getData里params是最新的???
        getData();
      };
      return (
        <button onClick={handleClick}>click me</button>
      );
    }
    1
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    • 晨尘缘 普通会员 1楼

      在React中,useState是一个常用的钩子函数,用于在组件的状态改变时更新组件的渲染状态。如果你想获取组件的最新状态,你可以使用useEffect钩子函数。useEffect是一个生命周期钩子函数,它会在组件的状态改变时被调用。

      以下是一个例子:

      ```jsx import React, { useState } from 'react';

      function Example() { const [count, setCount] = useState(0);

      useEffect(() => { console.log(count); }, [count]);

      return (

      You clicked {count} times

      ); }

      export default Example; ```

      在这个例子中,我们首先定义了一个状态变量count,并使用useState来初始化它为0。然后,我们在useEffect钩子函数中定义了一个console.log语句,它会在count状态改变时被调用。

      最后,我们在组件的返回部分返回了一个段落,其中包含了count状态的值。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部