React Native 0.43 を使用しています。と という名前の 2 つのコンポーネントがParentComponent
ありChildComponent
ます。親コンポーネントから子コンポーネントにいくつかの小道具を渡したいです。親コンポーネントで次のコード(要約版)を使用しています:
export default class ParentComponent extends Component {
constructor(props) {
super(props);
this.state = {
latitude: 34.7821,
};
}
render() {
return (
<View>
<ChildComponent latitude={this.state.latitude} />
</View>
);
}
}
私の子コンポーネントは次のとおりです。
export default class ChildComponent extends Component {
constructor(props) {
super(props);
this.state = {
latitude: props.latitude,
};
}
componentWillMount() {
console.log('Before Mount: ' + this.state.latitude)
}
render() {
return (
<Text>{'Mounted: ' + console.log(this.state.latitude)}</Text>
);
}
}
今、私のコンソールは次の結果を示しています:
2:14:12 AM: Before Mount: null
2:14:12 AM: Mounted: null
2:14:12 AM: Mounted: 34.7821
現在、私の元のコードには、少なくとも最初のレンダリングでは、明らかに渡されていないcomponentWillMount()
値に依存する Web サービスへの API 呼び出しがあります。this.state.latitude
2 番目のレンダリングで、this.state.latitude
値が使用可能になると、render()
関数のみが実行されますが、関数でこの値が必要componentWillMount()
です。
ここで何が間違っていますか?