如何从response.json获取数据并将其传递给组件？

Question

我对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, 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; 

，这是apiRequest.js

post(url, body) { 
    return fetch(API_URL + url, { 
    method: 'POST', 
    headers: { 
     'Accept': 'application/json', 
     'Content-Type': 'application/json', 
    }, 
    body: JSON.stringify(body) 
    }).then(response => console.log((response.json()))) 
    } 

我看到，我从服务器需要当我这样做的console.log响应我的帖子方法。

但我只是不明白我该如何采取该响应/将它作为当前状态存储在变量/存储中，以便我可以将它传递给位置组件以将其显示在屏幕上。我确实看到结果为...

Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}__proto__: Promise[[PromiseStatus]]: "resolved"[[PromiseValue]]: Objecthospitals: (3) [{…}, {…}, {…}]pharmacies: (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]restaurants: (20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]schools: (20)[{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]trains: (2) [{…}, {…}]__proto__: Object 

感谢您对此提出任何建议。

Answer 1

response.json返回一个Promise。如果你不太了解他们，我建议你看看Promise。

你需要做的是返回response.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); 
    }) 
}