web-dev-qa-db-ja.com

goBackナビゲーション呼び出しの後にcomponentDidMountが呼び出されない

componentDidMountでデータをフェッチするためにreduxアクションを起動するStackNavigatorを設定しました。別の画面に移動して前の画面に戻った後、componentDidMountが起動しなくなったため、 mは白い画面を表示しました。 _StackActions.reset_を使用してStackNavigatorをリセットしようとしましたが、他の画面もマウントされず、空の画面が表示されるだけです。 this.props.navigation.goBack()の後にcomponentDidMountを強制する方法はありますか？

戻る機能

__goBack = () => {
  this.props.navigation.goBack();
};
_

新しい画面へのナビゲーション機能

__showQuest = (questId, questTitle ) => {
  this.props.navigation.navigate("Quest", {
    questId,
    questTitle,
  });
};
_

編集：こんにちは、私はまだこの問題に固執しており、SOコミュニティには、Navigation.goBack（）が呼び出された後にコンポーネントDidMountを強制的に呼び出すソリューションがあるのか​​、むしろアンマウントする方法があるのか​​と思っていましたthis.props.navigation.navigateが呼び出された後のコンポーネント

javascriptreactjsreact-nativereact-reduxreact-navigation
6
Ash Rhazaly

ナビゲーションが変更されてもコンポーネントは削除されないため、componentDidMountは初めてレンダリングされたときにのみ呼び出されます。

代わりに この代替アプローチ を使用できます。

class MyComponent extends React.Component {
  state = {
    isFocused: false
  };

  componentDidMount() {
    this.subs = [
      this.props.navigation.addListener("didFocus", () => this.setState({ isFocused: true })),
      this.props.navigation.addListener("willBlur", () => this.setState({ isFocused: false }))
    ];
  }

  componentWillUnmount() {
    this.subs.forEach(sub => sub.remove());
  }

  render() {
    if (!this.state.isFocused) {
      return null;
    }

    // ...
  }
}
5
Tholle