Question

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

这是一个简短的例子：

这是主应用程序...

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（如果您已经在使用它的话）都很好

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

Answer 2

考虑诸如Context / Redux之类的“商店经理”是一个好主意。如果将其包装在某些组件周围，则比将必要的数据传递给需要它的组件要容易得多。

Answer 3

执行此操作的方法是在父组件上使用存储。您可以使用useContext钩子来实现。
这是good tutorial关于如何实现它的信息。该算法将如下所示：

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

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

3 个答案: