如何從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); 
    }) 
}