状态没有使用 React 钩子更新答案

【问题标题】：state is not updating using React hook状态没有使用 React 钩子更新
【发布时间】：2019-11-13 19:53:19
【问题描述】：

这是一个在组件挂载到 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，我将它作为console.log 中的第一个参数传递。我认为我的仪表板状态变量没有得到更新

【问题讨论】：

这能回答你的问题吗？ Why calling react setState method doesn't mutate the state immediately?
我正在使用 React 钩子，无法将回调作为第二个参数传递
对于钩子，有一个类似的问题：stackoverflow.com/q/54069253/1218980
这能回答你的问题吗？ useState set method not reflecting change immediately

标签： javascript reactjs react-hooks

【解决方案1】：

回答

为dashboardData编写另一个useEffect。

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

}, [dashboardData]);

解释

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

【讨论】：

在初始化状态值（使用钩子）时，react 将 useState 的值传递给 react 核心，因此在重新渲染期间，如果您的先前状态和当前状态相等，并且如果您清除状态值，则数据不会丢失手动您应该准备好它将更新反应核心中的值（它将设置为空值）并且数据将丢失。

【解决方案2】：

您可以将“仪表板”作为依赖项传递给现有的 useEffect。现有的 useEffect 将同时用作 componentDidMount 和 componentDidUpdate。

所以不需要再写一个useEffect了。

useEffect(() => {
  loadDashboardData();
  console.log("campaigndata",dashboardData);
}, [dashboardData]);

【讨论】：