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);

  }, []);

当我在dashboardData中管理useEffect时，它只显示一个字符串，即campaigndata，它是我在console.log中的第一个参数。我认为我的仪表板状态变量没有更新

Answer 1

答案

仅为dashboardData写另一个useEffect。

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

}, [dashboardData]);

说明

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

Answer 2

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

因此无需编写另一个useEffect。

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

状态没有使用React钩子更新

2 个答案: