我正在尝试从 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中?
您的代码中有几个错误。可能让你绊倒的是this.setState({items:result.json()})
Fetch's .json()
方法返回一个承诺,因此需要将其作为异步处理。
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/ http://jsfiddle.net/weqm8q5w/6/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)