извлекать данные из компонента и визуализировать его в другом компоненте

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 от цитат до {}

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

также множество состояние неправильное использование: вместо

Answer 2

Прежде всего, вы получите Promise в постоянной names в getInitialState и вы возвращаете состояние {names: Promise} в свой компонент. Таким образом, он не имеет метода map и не работает.

Таким образом, вы должны вернуть действительное начальное состояние без каких-либо действий async, например: getInitialState: function() { return { names: [] }; }.

А затем выполните операцию асинхронного вызова и обновления на componentDidMount, например.

Проверьте это: fixed jsfiddle

Answer 3

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

Вы проходя проп name в то время как компонент ожидает names.

Кроме того, names должен быть пустой массив при запуске, а не ссылка на Promise:

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