将 React Hook 与上下文一起使用

Question

我做了一个小登录页面。 我想将视图和控制者分开。 所以我使用上下文

const axios = require('axios');
const AuthContext = React.createContext()
const onLogin = (login, password, saveCredentials) => {
const [error, setError] = useState("");
const [authentified, setAuthentified] = useState("");
axios.post('/signin', {
username: login,
password: password
})
.then(function(response) {
if (saveCredentials)
{
var cred = {
user: response.data.username,
password: response.data.password
};
}
console.log("test : " + response);
setAuthentified(true) ;
})
.catch(function (err) {
setError(err.response.data.message);
})
}
const AuthProvider = props =>
(
<AuthContext.Provider
value={{
onLogin
}}>
{props.children}
</AuthContext.Provider>
);
export { AuthProvider, AuthContext };

视图：

import { AuthContext } from 'controllers/authContext'
export default function Login(props) {
const classes = useStyles();
const Auth = useContext(AuthContext);
...
{ !Auth.authentified ? (
<Button simple size="lg" color="primary" onClick={() => Auth.useLogin(login, password)}>Login</Button>
</CardFooter>
<p align="center">{Auth.error}</p>
) : null

但是我不能将状态用于上下文函数，它不是反应函数。 错误消息是：React Hook "useState" is called in function "onLogin" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks

如何使用状态，并在登录组件中调用它们？

Answer 1

Yu可以使用反应方法(hooks(的方式与您现在使用它的方式相同，只要确保您当前正在导入内容即可。我认为您的上部文件中存在导入错误，使用应该使用

import {useState} from 'react'

并保持代码不变 或将每个useState替换为React.useState.