javascript-react.js在ajax请求完成之前不会呈现

我有一个非常简单的React.js组件,我需要使它同构(呈现在服务器上).问题是,仅在ajax请求完成后,组件才用有用的信息呈现,如下所示：

export default React.createClass({
  getinitialState() {
    return {}
  },

  componentDidMount() {
    fetch("/users/").then(response => {
      this.setState(users: response.data)
    })
  },

  render() {
    if (this.state.users == undefined) {
      return <div />
    }

    return <div>{this.state.users.map(some_function)}</div>
  }
})

问题在于,将空div返回搜索引擎毫无意义.我希望ajax请求完成(甚至在服务器上)并仅在此之后呈现.我该如何实现？

解决方法:

就像@Dencker提到的那样,您想让父组件决定何时渲染子组件,这样可以工作：

// Parent
export default React.createClass({
  getinitialState() {
    return {
      usersLoaded: false
    }
  },

  componentDidMount() {
    fetch("/users/").then(response => {
      this._users = response.users;
      this.setState({
        usersLoaded: true
      });
    })
  },

  render() {
    if ( this.state.usersLoaded ) {
      return (
        <ChildComponent users={this._users} />
      )
    } else {
      return null;
    }
  }
});

// Child
export default React.createClass({
  render() {
    return <div>{this.props.users.map(some_function)}</div>
  }
});

我在那儿做的是：

>在父组件上设置初始状态,即usersLoaded：false.
>在该组件的渲染功能中,确保仅在父级的usersLoaded状态为true时才渲染子级组件.
>父组件的componentDidMount方法是进行AJAX调用的地方,请注意,我在组件上使用了一个变量来存储用户,而不是状态对象(状态通常只用于存储非常简单的值).
>然后将其作为道具传递给子组件.

上面所有这些使子组件变得更加简单,因为它现在只需要一个render方法,而无需if / else检查.