如何在Axios呼叫中创建上下文API

Question

我有一个react前端和一个使用mongodb的express后端。我已经设法加密了JWT令牌，现在我想将相同的令牌传递到我的上下文状态中，这样我就可以在其他组件中使用它来访问私有路由。出于某种原因，当我尝试在上下文api上设置state时，它根本不会更新，除非我直接将其与单击事件一起使用。但是，当我收到Axios呼叫的响应时，我想更新上下文状态。//上下文

const AuthProvider = props => {
const [token, setToken] = useState({
token: ""
});
const addToken = UserToken => {
setToken({ token: UserToken });
};
return (
<AuthContext.Provider value={{ token, addToken, setToken }}>
{props.children}
</AuthContext.Provider>
);
};

//axios调用位于一个名为this的函数内部。用户订阅

let self = this;
axios
.post(`http://localhost:5000/user/${page}`, {
username,
password
})
.then(function(res) {
userdata = res;
if (page === "login") {
self.setState({
isUser: true,
data: res
});
self.context.addToken(this.state.data);
}
console.log("hi world");
})
.catch(function(error) {
if (error.response) {
self.setState({
isError: true,
error: error.response.data.msg
});
}
});

<form onSubmit={this.UserSubscription} className="login-form">
<label>Username</label>
<input type="text" id="username" name="username" />
<label className="label-password">Password</label>
<input type="text" id="password" name="password" />
<p className="error-msg">{msg}</p>
<button
type="submit"
className="form-btn login-btn"
>
{this.props.title}
</button>
</form>

Answer 1

你没有发布的代码一定有问题，因为我可以复制你发布的代码，而且它运行良好。

注意，令牌在context.token.token中

const AuthContext = React.createContext();
const AuthProvider = ({ children }) => {
const [token, setToken] = React.useState({
token: '',
});
const addToken = token => setToken({ token });
return (
<AuthContext.Provider
value={{
token,
addToken,
}}
>
{children}
</AuthContext.Provider>
);
};
class ComponentOne extends React.Component {
constructor(props) {
super(props);
Promise.resolve().then(() =>
this.context.addToken('hello world')
);
}
render() {
return <div>in One: {JSON.stringify(this.context.token)}</div>;
}
}
ComponentOne.contextType = AuthContext;
const ComponentTwo = () => {
const { token } = React.useContext(AuthContext);
return <pre>in two: {JSON.stringify(token)}</pre>;
};
const App = () => (
<AuthProvider>
<ComponentOne />
<ComponentTwo />
</AuthProvider>
);
ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>