为什么所有东西都不能在 useEffect 中工作一次？

Question

我的 useSelector 钩子仅在 useEffect 内返回 null 当我运行它正在工作的其他地方时。 例如：

// it's doesn't work.
const user = useSelector(selectUser);
useEffect(() => {
    console.log(user)
  }, []);

// it's work.
const user = useSelector(selectUser);
const exampleFunc = () => {
    console.log(user);
  }
  exampleFunc()

我正在使用谷歌身份验证。 第一次登录时它返回null，但是当我刷新页面时，它返回的用户信息不为null。 为什么从第一项返回null，刷新页面时用户信息就进来了？ 如果我输入 Console.log("Hello world") 钩子仍然不起作用，但是当我刷新页面时它起作用了。

// Redux
import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  user: null,
};

export const userSlice = createSlice({
  name: "user",
  initialState,
  reducers: {
    login: (state, action) => {
      state.user = action.payload;
    },
    logout: (state, action) => {
      state.user = null;
    },
  },
});

export const { login, logout } = userSlice.actions;

export const selectUser = (state) => state.user.user;

export default userSlice.reducer;

// Original function
const user = useSelector(selectUser);

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((userAuth) => {
      if (userAuth) {
        dispatch(
          login({
            email: userAuth.email,
            uid: userAuth.uid,
            displayName: userAuth.displayName,
            photoUrl: userAuth.photoURL,
          })
        );
      } else if (!userAuth) {
        dispatch(logout());
      }
    });
    return unsubscribe;
  }, []);

更新：我解决了这个问题。 我将 useEffect 函数更改为：

useEffect(() => {
    const userInfo = firebase.auth().currentUser;
    if (userInfo) {
      dispatch(
        login({
          email: userInfo?.email,
          uid: userInfo?.uid,
          displayName: userInfo?.displayName,
          photoUrl: userInfo?.photoURL,
        })
      );
    } else if (!userInfo) {
      dispatch(logout());
    }
  }, [dispatch]);

Answer 1

当您使用useEffect您传递一个依赖项数组作为第二个参数

useEffect(() => {}, [])
当您没有像上面那样向该数组传递任何项目时， useEffect语句将只在第一次渲染时运行，而不是在之后运行。 它基本上告诉 react 只执行一次 - 这与componentDidMount非常相似

useEffect(() => {}, [dependency, secondDependency])
当您将依赖项传递给数组时，每次这些依赖项之一发生更改时都会运行useEffect语句。 这就是您如何在状态更改上重建效果。

查看更多文档： https : //reactjs.org/docs/hooks-effect.html