从React调用API
从React调用API
提问于 2017-04-18 17:05:46
我正在尝试从Django Rest Framework获得JSON。该链接的编写方式类似于so http://127.0.0.1:8000/band/api/1/?format=json，结构如下：
{
id: 1,
name: "Muse",
date_added: "2017-04-17",
image: "https://upload.wikimedia.org/wikipedia/commons/a/a3/Muse_melbourne28012010.jpg",
bio: "Muse are an English rock band from Teignmouth, Devon, formed in 1994. The band consists of Matt Bellamy (lead vocals, guitar, piano, keyboards), Chris Wolstenholme (bass guitar, backing vocals, keyboards) and Dominic Howard (drums, percussion)."
}我的反应是这样写的：
class ItemLister extends React.Component {
constructor() {
super();
this.state={items:[]};
}
componentDidMount(){
fetch(`http://127.0.0.1:8000/band/api/1/?format=json`)
.then(result=>result.json())
.then(items=>this.setState({items}))
setTimeout(() => console.log(this.state.items), 2000)
}
render() {
return(
<ul>
{this.state.items.length ?
this.state.items.map(item=><li key={item.id}>{item.name}</li>)
: <li>Loading...</li>
}
</ul>
)
}
}
ReactDOM.render(
<ItemLister />,
document.getElementById('container')
);HTML停留在加载.上，控制台没有显示错误。我知道这与JSON有关，但不知道它是什么，任何帮助都很感激！
编辑：
按照m_callens的建议，在添加以下内容之后：
setTimeout(() => console.log(this.state.items)，2000年)
控制台返回我确实试图获取的对象，但它仍未在页面上呈现。
Object {id: 1, name: "Muse", date_added: "2017-04-17", image: "https://upload.wikimedia.org/wikipedia/commons/a/a3/Muse_melbourne28012010.jpg", bio: "Muse are an English rock band from Teignmouth, Dev…eyboards) and Dominic Howard (drums, percussion)."}回答 1
Stack Overflow用户
回答已采纳
发布于 2017-04-18 17:44:45
因此，经过漫长的日志记录和调试过程，我想我已经解决了这个问题。
初始状态是将items属性创建为array，因此尝试将每个项映射到<li>以呈现给UI，但是从fetch调用和重新分配this.state.items获得的值不是array，而是一个简单的对象。因此，当您尝试map对象时，它会失败，并解释为什么您的length条件总是失败。
不要在第二次items处理中直接重新分配setState，代之以这个版本的setState，以维护array结构。
...
.then(newItem => this.setState((prevState, props) => ({
items: [...prevState.items, newItem]
})
)
)您还可能希望将组件生命周期中的fetch调用从componentDidMount钩子推回componentWillMount钩子。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43478227
复制相关文章
相似问题
腾讯云开发者
