Question

我有一个非常简单的React.js组件，我需要创建一个isomorphic（在服务器上呈现）。问题是只有在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请求完成（即使在服务器上）并且仅在此之后呈现。我怎样才能做到这一点？

Answer 1

正如@Dencker所说，你想让父组件决定何时呈现子组件，这样的事情会起作用：

usersLoaded: false

我在做的是：

在父组件上设置usersLoaded。
在该组件的render函数中，确保我只在父级componentDidMount状态为true时呈现子组件。
父组件的if/else方法是发生AJAX调用的地方，请注意我在组件上使用变量来存储用户，不是状态对象（状态通常应该只是用于存储非常简单的值）。
然后将其作为prop传递给子组件。

以上所有内容使得子组件变得更加简单，因为它现在只需要一个render方法而不需要typealias CompletionHandlerType = (error:NSError ,response:AnyObject?) -> Void检查。

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

1 个答案: