如何解决React无法使用上下文API在未安装的组件上执行React状态更新
我通读了此解决方案here。但是我不知道如果不使用useEffect钩子怎么办。这个问题的重点将放在Login.js文件中。
这是我现在的代码：-
-
AuthState.js：-
import React,{ useContext,useReducer } from 'react'
import { AuthContext } from './AuthContext'
import AuthReducer from './AuthReducer'
export const useAuth = () => {
const { state,dispatch } = useContext(AuthContext)
return [state,dispatch]
}
export const AuthState = ({ children }) => {
const initialState = {
uid: '',authenticated: false,isactive: false,loading: true,error: false,message: ''
}
const [state,dispatch] = useReducer(AuthReducer,initialState)
return (
<AuthContext.Provider value={{
state: state,dispatch: dispatch
}}>
{children}
</AuthContext.Provider>
)
}
-
AuthAction.js（所有与身份验证相关的操作已在此处完成）
import axios from 'axios'
// Json Header
const config = {
headers: {
'Content-Type': 'application/json'
}
}
// Set Loading
export const setLoading = (dispatch) => dispatch({ type: 'SET_LOADING',payload: false })
// Set Error
export const setError = (dispatch,error) => dispatch({ type: 'SET_ERROR',payload: { error: error.status,message: error.message } })
// User Login
export const isLogin = async(dispatch,credentials) => {
setLoading(dispatch)
await axios.post('/api/auth',credentials,config)
.then(res => {
console.log(res.data.data) // data do show up,but not updated into the state
dispatch({
type: 'GET_RESPONSE_LOGIN',payload: res.data.data
})
}).catch(error => {
console.log(error.response.data.error) // do show up,but not updated into the state
dispatch({
type: 'SET_ERROR',payload: {
error: true,message: error.response.data.error
}
})
})
}
// User Logout
export const isLogout = async(dispatch,uid) => {
setLoading(dispatch)
await axios.post('/api/auth/logout',{ uid: uid },config)
.then(res => {
dispatch({
type: 'GET_RESPONSE_LOGOUT',payload: res.data.data
})
}).catch(error => {
dispatch({
type: 'SET_ERROR',message: error.response.data.error
}
})
})
}
// Check user isActive
export const isActive = async(dispatch,uid) => {
setLoading(dispatch)
await axios.post('/api/auth/isactive',config)
.then(res => {
dispatch({
type: 'GET_RESPONSE_ISACTIVE',payload: res.data.data
})
}).catch(error => {
dispatch({
type: 'SET_INACTIVE',message: error.response.data.error
}
})
})
}
-
AuthReducer.js：-
export default (state,action) => {
switch(action.type) {
case 'GET_RESPONSE_LOGIN':
return {
...state,uid: action.payload.uid,authenticated: true,isactive: true,}
case 'GET_RESPONSE_LOGOUT':
return {
...state,uid: '',}
case 'GET_RESPONSE_ISACTIVE':
return {
...state
}
case 'SET_INACTIVE':
return {
...state,error: action.payload.error,message: action.payload.message
}
case 'SET_ERROR':
return {
...state,message: action.payload.message
}
case 'SET_LOADING':
return {
...state,loading: action.payload
}
default:
return state
}
}
-
Login.js（登录页面）
import React,{ useState } from 'react'
import { isLogin,setError } from '../../contexts/Auth/AuthAction'
import { useAuth } from '../../contexts/Auth/AuthState'
import { Button } from '../Button'
import { FaTimes } from 'react-icons/fa'
import { Error } from './Error'
import './Section.css'
export const Section = () => {
const [authState,authDispatch] = useAuth()
const { uid,authenticated,error,message } = authState
// section bg color
const [lightBg] = useState(true)
// page specific states & functions
const [username,setUsername] = useState('')
const [password,setPassword] = useState('')
// handle login function
const handleLogin = async(e) => {
e.preventDefault()
await isLogin(authDispatch,{ uid: uid,email: username,password: password })
// empty out placeholders
setUsername('')
setPassword('')
// Export this in new component
// if authenticated,then go to dashboard
if(authenticated) return history.push('/pfv4-admin/dashboard')
}
return (
<>
<div className={lightBg ? 'login__section' : 'login__section darkBg'}>
<div className="login__wrapper">
{/* Export this in new component */}
{error && (
<div className="error__container">
<FaTimes size={20} className="error__btn"
onClick={() => setError(authDispatch,{error: false,message: ''})}
/>
<p className="error__message message__break">{message}</p>
</div>
)}
<div className="inputs__container">
<form className="input__form"
onSubmit={(e) => {
handleLogin(e)
}}
>
<div className="form__group">
<label className={lightBg ? 'form__label' : 'form__label darkLabel'}>Username</label>
<input type="email"
value={username}
onChange={(e) => setUsername(e.target.value)}
className={lightBg ? 'form__inputfield' : 'form__inputfield darkInputfield'}
required
/>
</div>
<div className="form__group">
<label className={lightBg ? 'form__label' : 'form__label darkLabel'}>Password</label>
<input type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className={lightBg ? 'form__inputfield' : 'form__inputfield darkInputfield'}
required
/>
</div>
{lightBg ? (
<Button buttonSize="btn--wide">Login</Button>
) : (
<Button buttonSize="btn--wide" buttonColor="accents">Login</Button>
)}
</form>
</div>
</div>
</div>
</>
)
}
使用上面的代码。我遇到了Can't perform react state update on an unmounted component...错误。就像我之前说的那样，因为我使用Context APi。我无法添加let mounted = true和清理功能return () => {mounted = false}。
相反，由于我加入了Context API。我刚刚调用了函数isLogin来处理用户向服务器输入的post中的credentials。
但是我确实找到了解决方案或没有。通过导出error和authenticated状态检查（如下所示）：-
- 新
Login.js：-
import React,{ useState } from 'react'
import { isLogin } from '../../contexts/Auth/AuthAction'
import { useAuth } from '../../contexts/Auth/AuthState'
import { Button } from '../Button'
import { Error } from './Error'
import './Section.css'
export const Section = () => {
const [authState,authDispatch] = useAuth()
const { uid } = authState
// section bg color
const [lightBg] = useState(true)
// page specific states & functions
const [username,password: password })
// empty out placeholders
setUsername('')
setPassword('')
}
return (
<>
<div className={lightBg ? 'login__section' : 'login__section darkBg'}>
<div className="login__wrapper">
<Error />
<div className="inputs__container">
<form className="input__form"
onSubmit={(e) => {
handleLogin(e)
}}
>
<div className="form__group">
<label className={lightBg ? 'form__label' : 'form__label darkLabel'}>Username</label>
<input type="email"
value={username}
onChange={(e) => setUsername(e.target.value)}
className={lightBg ? 'form__inputfield' : 'form__inputfield darkInputfield'}
required
/>
</div>
<div className="form__group">
<label className={lightBg ? 'form__label' : 'form__label darkLabel'}>Password</label>
<input type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className={lightBg ? 'form__inputfield' : 'form__inputfield darkInputfield'}
required
/>
</div>
{lightBg ? (
<Button buttonSize="btn--wide">Login</Button>
) : (
<Button buttonSize="btn--wide" buttonColor="accents">Login</Button>
)}
</form>
</div>
</div>
</div>
</>
)
}
-
Error.js（作为组件导出的那个）：-
import React,{ useEffect } from 'react'
import { FaTimes } from 'react-icons/fa'
import { useHistory } from 'react-router-dom'
import { setError } from '../../contexts/Auth/AuthAction'
import { useAuth } from '../../contexts/Auth/AuthState'
export const Error = () => {
const [authState,authDispatch] = useAuth()
const { authenticated,message } = authState
// page specific states & functions
const history = useHistory()
useEffect(() => {
if(authenticated) return history.push('/pfv4-admin/dashboard')
},[authenticated])
return (
<>
{error && (
<div className="error__container">
<FaTimes size={20} className="error__btn"
onClick={() => setError(authDispatch,message: ''})}
/>
<p className="error__message message__break">{message}</p>
</div>
)}
</>
)
}
有了这些更改，我就能克服这个问题。 但是任何人都可以与我分享我该怎么做，以确保不会再次发生这种错误？当然要使用Context API。
就像我之前说的，我确实认为在某些情况下我可以使用let isMounted = true并执行清理功能。但是我不知道是否可以在这里实现这种方法。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
