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

【问题标题】：How can I redirect the user after updating state?更新状态后如何重定向用户？
【发布时间】：2020-02-25 06:07:33
【问题描述】：

我有一个 React 登录页面，它调用 NodeJS API 进行身份验证（通过 Axios）。这似乎工作正常。成功时返回 true，失败时返回错误消息。 Ps：我没有使用 JWT，而是使用会话。我希望在成功登录后，组件中的状态（全局）发生变化，然后将用户重定向到仪表板。

我的代码似乎改变了全局状态（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。谢谢大家。

【问题讨论】：

标签： javascript reactjs redux axios react-hooks

【解决方案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>
    )
}

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

【讨论】：