Должен использовать деструктурирующий реквизит

Question

Я использую Eslint в своем проекте React Native, и в этом коде:

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>
    );
  }
}

Эслинту дано предупреждение: «Должен использовать деструктурирующее назначение реквизита».Я пытался изменить присвоение на

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

Но выдает ошибку: "undefined не является объектом"

EDIT: изменил конструктор на:

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

теперь код выполняется без ошибок

Answer 1

Если вам нужна только функция навигации, то, как сказал Милор, лучший способ добиться того, что вам нужно, это:

const {navigate} = this.props.navigation

Однако, если вам нужно деструктурироватьдругие свойства навигации, вы можете использовать:

const {navigation} = this.props

Или деструктурировать, как рекомендуется Hespen.

Подробнее о деструктуризации: Документация MDN JS Info

Answer 2

Вы должны сделать это так:

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

Или, если вы хотите пойти на один рычаг глубже:

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

Но в этом случае должен быть определен объект навигации.Хотя можно задать значение по умолчанию для объектов разрушения.

Например,

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

Теперь навигация будет пустым объектом, если он не определен.