从组件外部更新状态

Question

This is a similar question but it provided solution for the specific issue of OP

我正在尝试使用 JWT 在我的 React 应用程序中实现身份验证。登录后，服务器发送access token和refresh token。访问令牌会在一小时内到期，而刷新令牌会持续一年。两者都存储在localStorage。

我正在使用axios 向服务器发出请求。我创建了一个文件api.js，它创建了一个axiosInstance，它为请求设置了baseURL。这个文件导出这个 axios 实例和所有其他想要使用 axios 的组件/文件，从这个文件 - api.js 导入它。我还在同一个文件中设置了一个axios interceptor，它将在发送之前修改每个请求。如果令牌没有过期，它基本上会在authorization header 中添加访问令牌，否则它将使用刷新令牌来获取新的访问令牌。

现在我有一个 TokenProvider 上下文，它基本上包装了整个应用程序，它为您提供了令牌和一种方法来更新这个给定的令牌以及本地存储中的令牌(useToken)。

在刷新令牌的帮助下从服务器获取访问令牌后，我想在本地存储中更新它以及 TokenProvider 提供的令牌。我尝试在 api.js 中从 TokenProvider 导入 useToken，但 React 不允许在非组件的函数中使用钩子。

React Hook "useToken" 在函数 "{functionName}" 中被调用，即 既不是 React 函数组件，也不是自定义的 React Hook 函数。 React 组件名称必须以大写字母开头。

我应该如何实现这个功能来更新 TokenProvider 的令牌？我应该在 TokenProvider 中监听 localStorage 更新时触发的事件，还是应该尝试将 api.js 转换为某种类型的 React 组件？

Answer 1

使用 forwardRef ，阅读文档here 在调用 setStateName() 的组件内创建函数， 并从组件的引用中调用它