从一个组件中获取数据并在另一个组件中进行渲染

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

将引号改为{}

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

设置状态也错误使用：相反，

Answer 2

首先，在getInitialState中的names常量中获得Promise ，并将状态{names：Promise}返回到组件中。 因此它没有map方法并且失败了。

因此，您应该返回一个没有任何异步操作的有效initialState，例如： getInitialState: function() { return { names: [] }; } getInitialState: function() { return { names: [] }; } 。

例如，然后在componentDidMount上进行异步调用和更新状态。

检查一下： 固定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: []};
},