web-dev-qa-db-ja.com

Reactネイティブ：コンポーネントとcomponentWillMount（）メソッド間で小道具を渡す

React Native0.43を使用しています。ParentComponentとChildComponentという名前の2つのコンポーネントがあります。親から子のコンポーネントにいくつかの小道具を渡したいです。親コンポーネントで次のコード（要約版）を使用しています：

_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()関数にこの値が必要です。

私がここで間違っていることは何ですか？

reactjsreact-nativereact-hooksprop
3
Faisal Khurshid

このメソッドは最初のレンダリングの直前に1回しか実行されないため、componentWillMountでprops値を受け取ることができませんでした。最初のレンダリングで小道具が親コンポーネントから子コンポーネントに渡されていなかったため、子コンポーネントでcomponentWillReceivePropsメソッドを使用して問題を解決しました。後続のレンダリングで小道具を受け取り、子コンポーネントの元の状態を更新します。これにより、州の値にアクセスできるようになります。私が解決するために使用するコードは次のとおりです。

  componentWillReceiveProps(nextProps) {
      // update original states
      this.setState({
        latitude: nextProps.latitude,
      });
  }
6
Faisal Khurshid

あなたは「この」用語であなたの小道具を呼ばなければなりません。

  constructor(props) {
    super(props);

    this.state = {
      latitude: this.props.latitude,
    };
  }

  componentWillMount() {
    console.log('Before Mount: ' + this.state.latitude)
  }
3
Cracked