重新路由到传递响应数据的组件答案

【问题标题】：Reroute to component passing response data重新路由到传递响应数据的组件
【发布时间】：2020-02-20 13:04:33
【问题描述】：

有什么方法可以将发布请求的响应传递给另一个组件，然后重新路由到该组件？

这是一个简短的例子：

这是主应用程序...

import React from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom'

import Login from './components/login.component'
import Homepage from './components/homepage.component'

const App = () => (
    <Router>
        <Route path="/" exact component={ Login } />
        <Route path="/homepage" component={ Homepage } />
    </Router>
)

export default App

这里是发布请求的表单...

import React from 'react'
import axios from 'axios'

const Login = () => {

    const handleSubmit = event => {
        event.preventDefault()
        axios.post( API, {
            user_id: 'demo',
            user_pwd: 'demo'
        })
        .then( res => {
            console.log( res.data )
            // ???
        })
    }

    return(
        <form onSubmit={ handleSubmit }>
            ...
        </form>
    )

}

export default Login

这是我想以某种方式获取响应数据的地方

import React from 'react'

const Homepage = props => {
    console.log( props )
}

export default Homepage

【问题讨论】：

您可以使用上下文或全局状态管理，例如 redux。您可以将响应中的数据存储在全局状态中，然后将 Home 组件连接到状态并获取值。

标签： javascript reactjs react-router axios

【解决方案1】：

处理此类情况的最佳方法是在您的应用程序中提供一个提供程序，您可以在其中存储这些数据，然后在您想要的任何组件中使用它

对于您的情况，如果您已经在使用上下文提供程序甚至是 redux 会很好

UserContext.js

export const UserContext = React.createContext();

UserProvider.js

export default class UserProvider extends React.Component {
   state= {
      userData: null
   }
   updateUserData = (userData) => {
      this.setState({userData})
   }
   render() {
       return <UserContext.Provider value={{userData: this.state.userData, updateUserData: this.updateUserData}} >{this.props.children}</UserContext.Provider>
   }

}

主应用

const App = () => (
  <UserProvider>
    <Router>
        <Route path="/" exact component={ Login } />
        <Route path="/homepage" component={ Homepage } />
    </Router>
  </UserProvider>
)

export default App

const Login = () => {
    const {updateUserData} = useContext(UserContext);
    const handleSubmit = event => {
        event.preventDefault()
        axios.post( API, {
            user_id: 'demo',
            user_pwd: 'demo'
        })
        .then( res => {
            console.log( res.data )
            updateUserData(res.data);
        })
    }

    return(
        <form onSubmit={ handleSubmit }>
            ...
        </form>
    )

}

export default Login

在主页中

import React from 'react'

const Homepage = props => {
    console.log( props )
    const {userData} = useContext(UserContext);
    console.log(userData);
}

export default Homepage

【讨论】：

【解决方案2】：

考虑一些像 Context / Redux 这样的“商店经理”是个好主意。如果你将它包裹在一些组件上，那么将必要的数据传递给需要它的组件会容易得多。

【讨论】：

【解决方案3】：

这样做的方法是在父组件上使用 store。您可以使用 useContext 挂钩来完成此操作。
这是一个good tutorial，关于如何实现它。算法是这样的：

使用 Axios 执行登录并将从 API 获取的用户设置为上下文存储
将用户重定向到特定路线
从上下文中获取用户

【讨论】：