4

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.latitude2 番目のレンダリングで、this.state.latitude値が使用可能になると、render()関数のみが実行されますが、関数でこの値が必要componentWillMount()です。

ここで何が間違っていますか?

4

3 に答える 3