从React调用API

我想让React从Django Rest Framework API获取JSON。链接是这样写这样http://127.0.0.1:8000/band/api/1/?format=json和结构如下：从React调用API

{ 
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 div容器停留在载入中...，控制台显示没有错误。我知道它与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)."}

来源

2017-04-18 NewScientists

你真的获得数据吗？尝试注销第二个项目。然后 – WilomGfx

@WilomGfx我加了console.log（this.items）在第二个.then下面，它说undefined。 – NewScientists

那么你没有收到API的数据，确保它在服务器端工作。 – WilomGfx

因此，经过长时间的记录和调试过程，我想我已经找到了问题。

你的初始状态是创建items属性作为array，因此你要每个项目映射到<li>呈现给你的用户界面，但是你从你的电话fetch找回价值，并重新分配给this.state.items不是一个array，而是一个简单的对象。因此，当您尝试map对象时，它会失败，并解释为什么您的条件总是失败。

，而不是在第二.then处理方式的获取，与此版本的setState保持array结构取代它直接重新分配items。

... 
    .then(newItem => this.setState((prevState, props) => ({ 
     items: [...prevState.items, newItem] 
     }) 
    ) 
)

您可能还需要从componentDidMount钩推fetch回调在组件的生命周期为componentWillMount钩。

来源

2017-04-18 17:44:45

谢谢你的作品！在[prevState – NewScientists

[Spread Syntax]（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator））之前的三个点是什么？简而言之，它需要'state.items'的前一个值在当前的'setState'调用之前，并且用已经存在的任何东西填充该数组，然后添加新的一个。 –

感谢您的帮助，在这里肯定了解了几件事情。 – NewScientists

从React调用API

回答

相关问题