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

Question

有什么方法可以将来自 post 请求的响应传递到另一个组件，然后重新路由到该组件？这是一个缩短的示例：这是主要的应用程序...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

Answer 1

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

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

用户上下文.js

export const UserContext = React.createContext();

用户提供者.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

Answer 2

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

Answer 3

这样做的方法是在父组件上使用存储。您可以使用useContext钩子来完成。
这是一个关于如何实现它的好教程。该算法将是这样的：

• 使用 Axios 执行登录并将从 API 获取的用户设置为上下文存储

• 将用户重定向到特定路由

• 从上下文中获取用户