更新状态后如何重定向用户

Question

我有一个React登录页面，它调用NodeJS API进行身份验证(由Axios进行(。这似乎很有效。成功时返回true，失败时返回错误消息。Ps：我不是用JWT，而是用session。我希望在成功登录后，组件中的状态(全局(发生变化，然后将用户重定向到仪表板。

我的代码似乎改变了全局状态(Redux(，在成功登录后进行的测试中没有问题。

export const Login = () => {
const loggedIn = useSelector(state => state.loggedIn)
const dispatch = useDispatch()
const axiosURL = 'http://127.0.0.1:3333'
const [inputs, setInputs] = useState("")
const [returnMessage, setReturnMessage] = useState("")
const handleSubmit = (e) => {
e.preventDefault()
setTimeout(async (e) => {
const { data } = await axios.post( axiosURL + '/login', inputs)
setReturnMessage(data.message)
if (!data.message) dispatch({ type: 'LOGIN' })
}, 1000)
}
if (loggedIn) {
return <Redirect to='/' />
}
return (... the JSX form code ...)
}

这是有效的，当登录工作时重定向到"/"，问题是我得到了一个我不知道如何修复的错误(以及原因(：

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

"/"是一个受保护的路由，当我将全局状态的默认值设置为true时，页面加载不会将用户重定向到"/login"。这是我在私有路由上重定向用户的代码，以防状态为假：

const PrivateRoute = ({ component: Component }) => (
<Route render={props => (
loggedIn ? (
<Component {...props} />
) : (
<Redirect to={{ pathname: '/login', state: { from: props.location } }} />
)
)}
/>
)

有人知道如何修复它，甚至为我的需求提出更好的解决方案吗？为了安全起见，我不想在客户端存储JWT。谢谢大家。

Answer 1

我已经通过添加全局状态loggedIn作为道具来修复了这个问题，如下所示：

const PrivateRoute = ({ component: Component, loggedIn }) => (
<Route render={props => (
loggedIn ? (
<Component {...props} />
) : (
<Redirect to={{ pathname: '/login', state: { from: props.location } }} />
)
)}
/>
)

和：

export const Routes = () => {
const loggedIn = useSelector(state => state.loggedIn)
return (
<Switch>
<PrivateRoute exact path="/" component={Home} loggedIn={loggedIn} />
<Route exact path="/login" component={Login} />
<Route component={Error404} />
</Switch>
)
}

如果有人知道更好的方法，请告诉我。