Question

我在我的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发出警告：“必须使用破坏性道具分配”。我尝试将分配更改为

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

但是它给出了一个错误：“未定义不是对象”

编辑： 将构造函数更改为：

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

现在代码运行没有错误

Answer 1

您应该这样做：

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

或者如果您想更深入一点：

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

但是在那种情况下，应该定义导航对象。尽管可以为销毁对象提供默认值。

例如

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

如果未定义，现在导航将是一个空对象。

Answer 2

如果您只需要导航功能，那么正如米洛尔所说，实现您想要的最佳方法是：

const {navigate} = this.props.navigation

但是，如果需要破坏导航的其他属性，则可以使用：

const {navigation} = this.props

或者按照Hespen的建议进行销毁。

有关解构的更多信息：MDN Documentation JS Info

必须使用破坏性道具分配

2 个答案: