[解決済み] 構造化小道具の割り当てを使用しなければならない [重複] 。

質問

React Nativeのプロジェクトで、このコードでEslintを使っています。

export default class AuthLoadingScreen extends React.Component {
  constructor() {
    super();
    this.bootstrapAsync();
  }

  bootstrapAsync = async () => {
    const userToken = await AsyncStorage.getItem('userToken');
    this.props.navigation.navigate(userToken ? 'App' : 'Auth');
  };

  render() {
    return (
      <View style={styles.container}>
        <ActivityIndicator />
        <StatusBar barStyle="default" />
      </View>
    );
  }
}

Eslintは、"Must use destructuring props assign"という警告を出しました。私は、割り当てを

const navigation = this.props;
navigation.navigate(userToken ? 'App' : 'Auth');

しかし、エラーが発生します: "undefined is not an object"

EDITです。 にコンストラクタを変更しました。

constructor(props) {
    super(props);
    this.bootstrapAsync(props);
  }

これでエラーなしでコードが実行されるようになりました

解決方法は？

このようにすればいいのです。

const { navigation } = this.props;
navigation.navigate(userToken ? 'App' : 'Auth');

あるいは、もう1つレバーを深くしたい場合。

const { navigation: { navigate } } = this.props;
navigate(userToken ? 'App' : 'Auth');

しかし、その場合、ナビゲーションオブジェクトを定義する必要があります。ただし、構造化解除オブジェクトにデフォルト値を与えることは可能です。

例

const { navigation: { navigate } = {} } = this.props;

これでナビゲーションは未定義の場合、空のオブジェクトになります。