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

首先，您在Promise中的names常量中得到getInitialState，然后将状态{names：Promise}返回到您的组件中。所以它没有map方法而且失败了。

所以你应该返回一个没有任何异步操作的有效initialState，如下所示：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: []};
},

从组件中获取数据并在另一个组件中呈现它

3 个答案: