Question

我正在开发Isomorphic React的网站。我从构造函数方法中获取数据。但数据没有显示出来。

 constructor(props) {
    super(props);
    /**
     * @type {object}
     * @property {array} tracks all tracks
     */

    const data = fetchDemoData();

    this.state = {
      name:data
    };
  }

Answer 1

根据react docs on loading initial data via Ajax，您应该使用componentDidMount方法获取初始数据。

因此，您在构造函数中设置初始状态，并在componentDidMount中更新它。

Answer 2

您不应该使用this.state突变来更改状态。这违反了反应的基本原则，即用this.setState()改变状态。如果您需要获取组件的默认状态，则应使用static initialState（如果您使用的是基于class的组件）或getInitialState()（如果您使用的是React.createClass }）。

后端渲染的常见做法是完全避免使用状态。而是使用道具。考虑两个组成部分：

class FooContainer extends React.Component {

  render() {
    return (
      <Foo
        users={this.state.users}
        />
    );
  }

}

和

class Foo extends React.Component {

  render() {
    /* ... */
  }

}

您可能会注意到<FooContainer />有状态而<Foo />没有状态。在大多数情况下，渲染<Foo />很容易，但渲染<FooContainer />可能会导致问题（简单的compnentDidMount永远不会运行）。

所以你应该模仿Foo的道具并渲染它。

获取React中渲染组件的初始数据

2 个答案: