从反应组件进行 REST 调用答案

【问题标题】：Making REST calls from a react component从反应组件进行 REST 调用
【发布时间】：2016-09-25 22:58:08
【问题描述】：

我正在尝试从 react 组件进行 REST 调用并将返回的 JSON 数据呈现到 DOM 中

这是我的组件

import React from 'react';

export default class ItemLister extends React.Component {
    constructor() {
        super();
        this.state = { items: [] };
    }

    componentDidMount() {
        fetch(`http://api/call`) 
            .then(result=> {
                this.setState({items:result.json()});
            });
    }

    render() {        
        return(
           WHAT SHOULD THIS RETURN?
        );
    }

为了将返回的 json 绑定到 DOM 中？

【问题讨论】：

标签： json rest dom reactjs fetch

【解决方案1】：

您的代码中有几个错误。 this.setState({items:result.json()})

Fetch 的.json() 方法返回一个promise，因此需要作为异步处理。

fetch(`http://jsonplaceholder.typicode.com/posts`)
.then(result=>result.json())
.then(items=>this.setState({items}))

我不知道为什么.json() 会返回一个承诺（如果有人能解释一下，我很感兴趣）。

对于渲染功能，你去...

<ul>
   {this.state.items.map(item=><li key={item.id}>{item.body}</li>)}
</ul>

不要忘记唯一键！

对于另一个答案，无需绑定地图。

它正在工作......

http://jsfiddle.net/weqm8q5w/6/

【讨论】：

fetch() 函数返回一个 Promise，因为它是异步的。 Ir 的结果只有在 http 请求完成后才可用，因此 Promise 是处理它的最佳方案。
@JoachimSchirrmacher 我指的是为什么 result.json() 返回一个承诺。它不需要在当前执行上下文之外执行。
.json() 返回一个 Promise，因为 JSON.parse() 在处理大型结果时非常慢，并且如果失败会抛出异常。
.json() 是否返回一个承诺，因为它正在从可能尚未下载的主体流中读取？

【解决方案2】：

你可以试试这个渲染方法：

render() {
    var resultNodes = this.state.items.map(function(result, index) {
        return (
            <div>result<div/>
        );
    }.bind(this));
    return (
        <div>
            {resultNodes}
        </div>
    );
}

别忘了将.bind(this) 用于你的fetch(...).then()，我认为没有...

【讨论】：

【解决方案3】：

Fetch 方法将返回一个 Promise，这使得编写以异步方式工作的代码变得简单：

在你的情况下：

componentDidMount(){
  fetch('http://api/call')      // returns a promise object
    .then( result => result.json()) // still returns a promise object, U need to chain it again
    .then( items => this.setState({items}));
}

result.json() 返回一个 Promise，因为它适用于 响应流，我们需要首先处理整个响应才能工作。

【讨论】：

【解决方案4】：

请改用以下内容。它将起作用：（如果加载到控制台也可以查看数据）


 constructor(props) {
        super(props);
        this.state = {
            items: []
        }
    }

 componentDidMount() {
        fetch('http://api/call')
            .then(Response => Response.json())
            .then(res => {
                console.log(res);
                this.setState({
                    items: res,
                });
            })
            .catch(error => {
                console.log(error)
            })
    }

然后根据需要使用渲染期间存储在状态中的结果来显示。

【讨论】：