ReactのAPIを呼び出す

Question

私はReactを取得して、Django Rest Framework APIからJSONを取得しようとしています。リンクはとても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コンテナのdivがロード...、コンソールにとどまりますエラーは表示されません。私はJSONとは何かを知っていますが、それが何であるか把握することはできません。

EDIT：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)."} 

Answer 1

ロギングとデバッグの長いプロセスの後、私は問題を把握したと思います。

あなたの初期状態はarrayとしてitemsプロパティを作成しているので、あなたがあなたのUIにレンダリングする<li>に各項目をマッピングしようとしている、あなたが戻ってあなたのfetch呼び出しから取得してthis.state.itemsへの再割り当てしているが値arrayではなく単純なオブジェクトです。したがって、オブジェクトをmapにしようとすると、失敗し、なぜlengthの状態が常に失敗しているのかを説明します。代わりに、直接あなたのarray構造を維持するためにsetStateのこのバージョンで置き換え、フェッチの第二.then取り扱いにitemsを再割り当てする

。

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

またcomponentWillMountフックにcomponentDidMountフックから戻ってコンポーネントのライフサイクルにおけるfetchコールをプッシュすることができます。