[英]Why does the state update but I can't access it via hooks in React?
I'm having trouble accessing my updated global state in react via hooks.我在通过钩子做出反应时无法访问我更新的全局 state。 I created custom hooks to get away from reducers and anything redux because I'm not a fan of it.我创建了自定义钩子来摆脱减速器和任何 redux 因为我不喜欢它。 Everything is working well but i cannot access my state.一切正常,但我无法访问我的 state。
Here is how the global state is set up下面是全局state的设置方法
import React, {useState, useMemo, useContext} from 'react'
function makeStore() {
// Make a context for the store
const Context = React.createContext();
// Make a provider that takes an initialValue
const Provider = ({ initialValue, children }) => {
// Make a new state instance (could even use immer here!)
const [state, setState] = useState(initialValue);
// Memoize the context value to update when the state does
const contextValue = useMemo(() => [state, setState], [state]);
// Provide the store to children
return <Context.Provider value={contextValue}>{children}</Context.Provider>;
};
// A hook to help consume the store
const useStore = () => useContext(Context);
return { Provider, useStore };
}
const {Provider, useStore} = makeStore();
export {
Provider,
useStore
}
I make sure to wrap the store provider around the App component我确保将商店提供程序包装在 App 组件周围
ReactDOM.render(
<Router basename="">
<Provider initialValue={initialState} >
<App />
</Provider>
</Router>,
document.getElementById("root")
);
The App component is clean and mainly used for routes App 组件很干净,主要用于路由
const App = () =>
<div className="App">
<Route exact path="/" component={props => <Landing {...props} />} />
<Route exact path="/login" component={props => <Login {...props} />} />
<Route exact path="/register/:id" component={props => <Register {...props} />}/>
<PrivateRoute path='/:id' Component={<Content />} />
</div>
export default App
When I hit the login page, enter login info, and click submit, the state updates.当我点击登录页面时,输入登录信息,然后单击提交,state 更新。 The only thing is I can't access the updated state inside my component.唯一的问题是我无法访问组件内更新的 state。
Heres the login component这是登录组件
const Login = ({...props}) => {
const { register, handleSubmit } = useForm()
const {auth, setAuth} = useAuth()
const {loginUser} = AuthApi()
const onSubmit = data => (async () => {
const response = await loginUser(data)
setAuth(response, true)
})()
useEffect(() => {
if(auth.isAuthenticated === true)
props.history.push('/dashboard')
}, [])
return(
<div className="Auth" style={{backgroundImage: 'url(' + background + ')'}}>
<div className="Login">
<div className="Auth-Form Login-Form">
<div className="Form-Header">
<h4>
<b>Login</b>
</h4>
</div>
<div className="Form">
<form onSubmit={handleSubmit(onSubmit)}>
<input
placeholder="Email"
name="email"
ref={register({
required: "email required"
})}
/>
<br/>
<input
placeholder="Password"
name="password"
ref={
register({
required: "password required"
})
}
/>
<br />
<input id="submit" type="submit" placeholder="Create Profile"/>
</form>
<p className="">
Don't have an account? <Link to="/register/user">Register</Link>
</p>
<Link to="/" className="">Back to home</Link>
</div>
</div>
</div>
</div>
)
}
export default Login;
and here's the useAuth hook code这是 useAuth 钩子代码
const useAuth = () => {
const [{...auth}, setState] = useStore()
const setAuth = (data, authenticationStatus) => {
setState(state => {
state.auth.token = data.token
state.auth.user = data.user
state.auth.loading = true
state.auth.isAuthenticated = authenticationStatus
})
}
return {auth, setAuth}
}
when the value of auth.isAutheticated coverts to true in the login component, nothing happens.当登录组件中 auth.isAutheticated 的值转换为 true 时,什么也不会发生。 In the provider the state is updated and even in the useAuth hook I console log the current state and its updated.在提供程序中,state 已更新,即使在 useAuth 挂钩中,我的控制台也会记录当前的 state 及其更新。 Yet I can't access it in the login component despite using useEffects?然而,尽管使用了 useEffects,但我无法在登录组件中访问它? is there something I'm missing.有什么我想念的吗?
this code only happens like componentdidmount - once:此代码仅像 componentdidmount 一样发生 - 一次:
useEffect(() => {
if(auth.isAuthenticated === true)
props.history.push('/dashboard')
}, [])
change to改成
useEffect(() => {
if(auth.isAuthenticated === true)
props.history.push('/dashboard')
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.