我正在尝试从 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 绑定(bind)到一个 DOM 中?
最佳答案
您的代码中有几个错误。可能会让你绊倒的是 this.setState({items:result.json()})
Fetch 的 .json()
方法返回一个 Promise,因此需要将其作为异步处理。
fetch(`http://jsonplaceholder.typicode.com/posts`)
.then(result=>result.json())
.then(items=>this.setState({items}))
我不知道为什么 .json()
会返回一个 promise (如果有人能解释一下,我很感兴趣)。
对于渲染功能,你去...
<ul>
{this.state.items.map(item=><li key={item.id}>{item.body}</li>)}
</ul>
不要忘记唯一键!
对于另一个答案,无需绑定(bind) map 。
它正在工作......
http://jsfiddle.net/weqm8q5w/6/
https://stackoverflow.com/questions/37486251/
相关文章:
ruby - 为什么我会得到 "no implicit conversion of String i
c# - 返回 JSON 对象 (ASP.NET WebAPI)
jquery - REST Web 服务与类似 RPC 的服务有何区别?
objective-c - 使用 Json 在 Objective C 中发布数据
c# - 强制 JSON.NET 在序列化 DateTime 时包含毫秒(即使 ms 组件为零)
python - 使用 JSON 模块进行 pretty-print 时如何实现自定义缩进?
json - 如何在 Ubuntu 上看到一个漂亮的大型 JSON 文件?
python - 如何使用 JSON.loads 转换为 Python 日期时间对象?