從組件獲取數據並將其呈現在另一個組件中

Question

任何線索爲什麼下面的代碼不起作用？這只是一個簡單的ajax調用，然後嘗試在另一個組件中呈現。我不知道錯誤在哪裏。

 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

cahnge的quots爲{}

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

還設置狀態是錯誤的使用方法：代替，

Answer 2

首先，您在names不斷得到Promise在getInitialState中，您將狀態{名稱：Promise}返回到您的組件中。所以它沒有map方法並失敗。

所以你應該返回一個有效的initialState而不用任何異步操作，像這樣：getInitialState: function() { return { names: [] }; }。例如，

然後在componentDidMount上進行異步調用和更新狀態。

檢查了這一點：fixed jsfiddle

Answer 3

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

你傳遞道具name而組件需要names。

此外，names應該是當你開始一個空數組，而不是一個承諾爲參考：但是這解決了這個問題

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: []}; 
},