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

Question

我有一个非常简单的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 请求完成(甚至在服务器上)并仅在之后呈现。我怎样才能做到这一点？

Answer 1

正如@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>
  }
});

我在那里做的是:

1. 设置父组件的初始状态为 usersLoaded: false。
2. 在该组件的渲染函数中，确保我只在父组件的 usersLoaded 状态为真时渲染子组件。
3. 父组件的 componentDidMount 方法是 AJAX 调用发生的地方，注意我在组件上使用一个变量来存储用户，不是状态对象(状态一般应该只用于存储非常简单的值)。
4. 然后将其作为 prop 传递给子组件。

以上所有这些都使子组件简单得多，因为它现在只需要一个渲染方法，而不需要 if/else 检查。