从React组件进行REST调用

小编典典

从React组件进行REST调用

reactjs

我正在尝试从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中？

阅读 677

2020-07-22

共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/

2020-07-22