javascript - 状态未使用 React hook 更新

Question

这是一个当组件挂载到 DOM 上时必须调用的函数

const [dashboardData, setDashboardData] = useState('');

const loadDashboardData = () => {
    console.log("Loading Dashboard Data ", campaign);
    Utils.request({
      url: `campaign/user/info`
    }).then(
      res => {
        console.log("dashboard data" , res.data)
        setDashboardData(res.data);
      },
      err => console.log(err)
    )
  }

 useEffect(() => {

    loadDashboardData();
    console.log("campaigndata",dashboardData);

  }, []);

当我在 useEffect 中控制台 dashboardData 时，它只显示一个字符串，即我作为 中的第一个参数传递的 campaigndata 。控制台.log。我认为我的仪表板状态变量没有更新

Answer 1

Answer

为 dashboardData 编写另一个 useEffect。

useEffect(() => {
    console.log("campaigndata",dashboardData);

}, [dashboardData]);

Explanation

您的useEffect采用空数组作为第二个参数，这使得它仅在第一次运行(如DidMount)，因此它不会在更改后在组件重新渲染时重新运行状态，这就是为什么它显示空字符串作为初始状态。
为变量 dashboardData 编写另一个 useEffect 将会根据 dashboardData 的变化运行多次。