Isomorphic ReactでWebサイトを開発しています。私はコンストラクタメソッドの内部からデータを取得しています。しかし、データは表示されません。Reactでコンポーネントをレンダリングするための初期データを取得する
constructor(props) {
super(props);
/**
* @type {object}
* @property {array} tracks all tracks
*/
const data = fetchDemoData();
this.state = {
name:data
};
}
react docs on loading initial data via Ajaxによると、あなたはcomponentDidMount方法で初期データをフェッチする必要があります。
コンストラクタで初期状態を設定し、componentDidMountでそれを更新します。
this.state突然変異で状態を変更しないでください。これは、状態を変更するために反応する基本的なプリンシパルに対してのみthis.setState()となります。コンポーネントのデフォルト状態を取得する必要がある場合は、（classコンポーネントを使用している場合）またはgetInitialState()（React.createClassを使用している場合）を使用する必要があります。
バックエンドレンダリングの一般的な方法は、まったく状態を使用しないことです。代わりに小道具を使用してください。あなたは<Foo />はそうではない<FooContainer />は状態を持って気づくかもしれませんが
class FooContainer extends React.Component {
render() {
return (
<Foo
users={this.state.users}
/>
);
}
}
と
class Foo extends React.Component {
render() {
/* ... */
}
}
：2つのコンポーネントを考えてみましょう。ほとんどの場合、<Foo />をレンダリングするのは簡単ですが、レンダリング<FooContainer />は問題を引き起こす可能性があります（単純なものは決して実行されません。compnentDidMountは実行されません）。
したがって、Fooの小道具をモックしてレンダリングする必要があります。