Question

我所有的api函数都放在一个特殊的文件夹中。使用它们时，有时必须更新上下文，该上下文存储用户的信息。

但是，当我尝试直接从这些函数中访问其值时，应用程序崩溃。因此，我始终必须在组件中导入上下文，然后将setUser函数作为参数传递给api函数。这有点混乱。如何在我的api服务中正确访问和更新上下文状态？

这是一个经典功能：

export async function useUpdatePassword(
  email: string,
  password: string,
  token
) {
  const { setUser } = useUser();
  try {
    const res = await ax.post(process.env.SERVER_URL + "/update-password", {
      email,
      password,
      token,
    });
    localStorage.setItem("myapp", res.data.token);
    setUser(jwt_decode(res.data.token));
    return "update password done!!"
  } catch (err) {
    return "error"
  }
}

还有我的背景：

const UserContext = createContext(null);

export default function UserProvider({ children }) {
  const [user, setUser] = useState<User>();

  useEffect(() => {
    fetchUser(setUser); // fetch user infos in my db
  }, []);

  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
}

export function useUser() {
  return useContext(UserContext);
}

如果无法使用Context进行操作，是否可以使用Redux，Jotai或任何其他库来这样做？

如何在组件外部访问React useContext？

0 个答案: