Redux 如何从response.json获取数据并将其传递给组件?
我真的是一个新的反应和重复。我创建了这个表单Redux 如何从response.json获取数据并将其传递给组件?,redux,react-redux,Redux,React Redux,我真的是一个新的反应和重复。我创建了这个表单 // node modules import React, { Component } from 'react'; import { Field, reduxForm, SubmissionError } from 'redux-form'; // custom modules import apiRequest from '../../redux/modules/apiRequests'; const renderField = ({ type
// node modules
import React, { Component } from 'react';
import { Field, reduxForm, SubmissionError } from 'redux-form';
// custom modules
import apiRequest from '../../redux/modules/apiRequests';
const renderField = ({ type, label, input, meta: { touched, error }}) => (
<div className="input-row">
<br />
<label>{label}</label>
<br />
<input {...input} type={ type }/>
{ touched && error &&
<span className="error">{ error }</span>}
</div>
)
class LocationForm extends Component {
constructor(props){
super(props)
this.state = {
address: '',
city: '',
state: ''
}
}
handleOnChange = event => {
this.setState({
[event.target.name]: event.target.value
});
}
submit = ({ address='', city='', state=''}) => {
// console.log(`state: ${this.state.address}`)
let error = {};
let isError = false;
if (address.trim() === '') {
error.address = 'Required';
isError = true;
}
if (city.trim() === '') {
error.city = 'Required';
isError = true;
}
if (state.trim() === '') {
error.state = 'Required';
isError = true;
}
if (isError) {
throw new SubmissionError(error);
} else {
console.log(this.props)
apiRequest.post(`/search`, this.state)
console.log(this.props)
this.setState({ address: '', city: '', state: ''})
}
}
render() {
return (
<form onSubmit={ this.props.handleSubmit(this.submit) }>
<Field name="address" label='Address: ' component={renderField} type="text" onChange={this.handleOnChange} />
<Field name="city" label='City: ' component={renderField} type="text" onChange={this.handleOnChange}/>
<Field name="state" label='State: ' component={renderField} type="text" onChange={this.handleOnChange}/>
<button type="submit">Submit</button>
</form>
)
}
}
LocationForm = reduxForm({
form: 'location'
})(LocationForm)
export default LocationForm;
在执行console.log时,我确实看到了服务器需要的响应
但我只是不明白如何将响应/存储在变量/存储中作为当前状态,以便将其传递到位置组件以在屏幕上显示。我确实认为结果是
Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}__proto__: Promise[[PromiseStatus]]: "resolved"[[PromiseValue]]: Objecthospitals: (3) [{…}, {…}, {…}]pharmacies: (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]restaurants: (20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]schools: (20)[{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]trains: (2) [{…}, {…}]__proto__: Object
感谢您对此提出任何建议。response.json将返回一个承诺。如果你对它们了解不多,我建议你去看看 您需要做的是返回response.json()的结果,然后从response读取数据
post(url, body) {
return fetch(API_URL + url, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify(body)
}).then(response => (response.json())).then((json) => {
console.log('Response JSON: ', json);
})
}
post(url, body) {
return fetch(API_URL + url, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify(body)
}).then(response => (response.json())).then((json) => {
console.log('Response JSON: ', json);
})
}