javascript - 如何传递从服务器返回的数据,然后使用返回的数据转换到另一个路由?
问题描述
嗨,我是新来的反应。我进行了服务器调用,然后成功得到了响应。现在,我正在尝试将相同的响应传递给另一条路线并在那里显示。我无法理解,我们如何在反应中做到这一点,就像在 Ember 中有一个方法 this.transitionTo('routepath', {data}) 然后这些数据在模型(参数)的路由路径中可用。这怎么可能反应?我一定不会使用任何 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.detail
componentDidMount 生命周期中使用来获取数据。
2)第二种解决方案是将其存储在本地存储中localStorage.setItem('token', data)
,然后使用localStorage.getItem('token')
推荐阅读
- c# - 安排约会的更智能方式
- angular - angular2中的JSON文件加载问题与导入
- php - 将枚举转换为 int 并从 MySQL 中的另一个表中插入该 int 值
- mongodb - 更新对象Mongodb下的特定对象数组
- python - 如何通过Python将数据写入现有的excel文件表?
- python - 这是在 python 中在内联循环和 c 类型循环之间编写循环的更好方法。
- geometry - 距离设定点最远的方向
- c++ - 从可执行文件创建二进制文件
- node.js - 如何在 node express mongo 中定位数据
- python-3.x - 在 Python 3 中将图像转换为傅里叶图像