如何传递从服务器返回的数据,然后使用返回的数据转换到另一个路由?

阿杰·辛格

嗨,我是新来的反应。我进行了服务器调用,然后成功得到了响应。现在,我试图将相同的响应传递给另一条路线并在那里显示。我无法理解,我们如何在反应中做到这一点,就像在 Ember 中有一个方法 this.transitionTo('routepath', {data}) 然后这个数据在模型(params)的路由路径中可用。这怎么可能反应?我一定不会使用任何 Redux 或任何其他状态容器。我的代码如下:

import React, { Component } from 'react'
import axios from 'axios'

class Ernform extends Component {
  constructor (props) {
    super();
    this.state = {
        category: '',
        zipcode: '',
        age: '',
        gender: '',
        key: '',
        data: null
    };
  }

  onChange = (e) => {
    this.setState({ [e.target.name]: e.target.value });
  }

  getPolicies = (e) => {
    e.preventDefault();
    const { category, zipcode, age, gender, key } = this.state;
    axios.post(`http://localhost:4000/api/v1/quote`, { category, zipcode, age, gender, key })
      .then(response => {
        this.setState({data: response}); // I am setting response from server to the state property data
        this.props.history.push('/details', {data: this.state.data})//I am trying to pass the data and trying to transition here.      
      });
  }

    render() {
    const { category, zipcode, age, gender } = this.state;
        return (
            <div>
                <form onSubmit={this.getPolicies}>
                    <label>
                        Category: <input type="text" name="category" value={category} onChange={this.onChange}/>
                    </label>
                    <label>
                        Zipcode: <input type="text" name="zipcode" value={zipcode} onChange={this.onChange}/>
                    </label>
                    <label>
                        Age: <input type="text" name="age" value={age} onChange={this.onChange}/>
                    </label>
                    <label>
                        Gender: <input type="text" name="gender" value={gender} onChange={this.onChange}/>
                    </label>
          <button className="btn btn-primary btn-lg lead" type="submit">Get Policies</button>
                </form>
            </div>
        );
    }
}

export default Ernform

我的路由器是这样的:

import React from 'react'
import { Switch, Route } from 'react-router-dom'
import Ernform from './Ernform';
import Ernentry from './Ernentry'
import Erndetails from './Erndetails';

const Routing = () => (
    <main>
      <Switch>
        <Route exact path='/' component={Ernentry}/>
        <Route path='/auto' component={Ernform}/>
        <Route path='/life' component={Ernform}/>
        <Route path='/details' component={Erndetails}/> // added this route.
      </Switch>
    </main>
  )

  export default Routing

我的详细信息路由组件是这个

import React, { Component } from 'react'


class Erndetails extends Component {
    constructor(props) { // Where would i get the data i transition with from that route.
        console.log(props);
        super()
    }
    render() {
        return (
            <div></div>
        )
    }
}

export default Erndetails

提前感谢很多人。

苏洛奇

您的问题有两种解决方案,

I)第一种解决方案是以这种方式将推送对象中的数据与路由一起传递, this.props.history.push({ pathname: '/details', state: { detail: response.data } })

而不是你的路过。

在您的详细信息路由组件中,您可以通过props.location.state.detail在构造函数或this.props.location.state.detailcomponentDidMount 生命周期中使用来获取数据

2)第二种解决方案是将其存储在本地存储中localStorage.setItem('token', data),然后使用localStorage.getItem('token')

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

请求数据,将其传递到另一个组件,然后以响应的方式返回

如何使用路由器从一个组件到另一个ReactJS访问传递的数据

如何使用本机路由器通量将数据传递到另一个屏幕?

将返回数据传递到同一控制器laravel中的另一个函数

如何使用查询的任何其他集合返回另一个集合的数据?

当一个函数使用另一个函数的返回数据时如何使用 mockito?

如何在 React 中将数据从单击的组件从一个路由传递到另一个路由?

从同一服务器访问另一个数据库?

保存并传递从承诺返回的数据以在反应中运行另一个组件

漫长的返回/传递数据到另一个模块

如何将数据从视图控制器传递到导航控制器,然后再传递到另一个视图控制器?

如何将数据从 Web 服务器发送到另一个应用程序

如何访问SP中其他服务器上的另一个数据库?

将数据库移到另一个服务器/实例时如何识别

将数据从一个路由器(组件)传递到另一个

将另一个api的返回数据集成到服务方法

服务承诺为组件上的另一个承诺返回处理过的数据

Angular 2从组件到服务再返回到另一个组件共享数据

BigQuery:在另一个服务器位置插入数据集

将数据传回服务器以执行另一个 api 调用?

我想用PHP访问另一个服务器数据库

指向另一个数据库服务器后,Jboss服务器无法启动

返回带有另一个类的数据成员的构造函数?获取转换错误?

使用来自一个可观察值的数据,然后将结果作为另一个可观察值返回

从函数返回另一个文件中的数据

如何使用jquery appendTo另一个div ....然后再次返回

将 js 数组传递给 mvc 控制器,然后返回另一个视图

JavaFX从一个控制器向另一个控制器返回正确的数据

如何通过DHCP从另一个DHCP服务器通过路由器获取IP?