时间戳

首页 > 解决方案 > useEffect() 函数只运行一次，store 稍后更新（React hooks）

reactjs - useEffect() 函数只运行一次，store 稍后更新（React hooks）

问题描述

我有一个应用程序，我正在获取这样的商店：

const user_data = useSelector(state => state.user_data);

之后我有一个useEffect()函数，它将某些状态对象分配给从商店接收的数据。

useEffect(() => {
  setName(user_data.name);
}, []);

商店的设置如下：

await dispatch(save_user_info(res.data.response));
props.history.push("/setting/dashboard");

现在的问题是，第一次运行user_data时是空的。useEffect之后它会被填充，但useEffect只运行一次。

页面在 store 更新之前被重定向到新组件，所以当页面第一次加载时，它没有 store 数据。

useEffect如果从商店返回数据，我该如何再次运行？

标签： reactjsreact-reduxreact-hooks

解决方案

如果您将 useEffect 的第二个参数保留为空，它将在每次组件更新时运行。

useEffect(() => {
  setName(user_data.name);
});

在您的情况下，如果此数组 []（为空）中提到的变量发生更改，它将运行。

或者你可以这样做

useEffect(() => {
  setName(user_data.name);
},[user_data]); // or props.user_data , howsoever you can refer to that

推荐阅读