コンポーネントからデータを取り出して別のコンポーネントにレンダリングする

Question

以下のコードが動作しない理由を教えてください。それは単純なAJAX呼び出しであり、別のコンポーネントでレンダリングしようとしています。私はどこにエラーがあるのか​​分からない。 {}

// from: 
<Hello name="this.state.names"/> 
//to: 
<Hello name={this.state.names}/> 

にquots cahnge

 var Names = React.createClass({ 
    getInitialState: function() { 
     const self = this; 
     const names = fetch('https://api.myjson.com/bins/ksgah') 
     .then(function(response) { 
      return response.json() 
     }) 
     .then(function(response) { 
      self.setState({'names':response.name}) 
     }) 
     return {names: names}; 
    }, 
    render() { 
     return (
     <Hello name={this.state.names}/> 
    ) 
    } 
}) 

var Hello = React.createClass({ 
    render: function() { 
    return(
     <ul> 
     { 
     this.props.names.map(name => { 
      return <li>{name}</li> 
     }) 
     } 
     </ul> 
    ) 
    } 
}) 

ReactDOM.render(<Names/> , document.getElementById('container')); 

http://jsfiddle.net/kzfufntw/

Answer 1

もセット状態は間違って使用することである。その代わり、

Answer 2

まず第一に、あなたはnames定数でPromiseを取得getInitialStateにあり、状態{名前：約束}をコンポーネントに返します。だからそれはmapメソッドではなく、失敗します。

したがって、getInitialState: function() { return { names: [] }; }のような非同期アクションのない有効なinitialStateを返す必要があります。

たとえば、非同期呼び出しと更新の状態をcomponentDidMountに設定します。 fixed jsfiddle

Answer 3

<Hello name={this.state.names}/> 

コンポーネントがnamesを期待しながら、あなたは小道具nameを渡している。このうち

チェック。しかし、それは問題を解決しています

getInitialState: function() { 
    const self = this; 
    fetch('https://api.myjson.com/bins/ksgah') 
    .then(function(response) { 
     return response.json() 
    }) 
    .then(function(response) { 
     self.setState({'names':response.name}) 
    }) 
    return {names: []}; 
},