React Native结合react-navigation报TypeError：null不是对象问题求助

这个错误不是react-navigation的链接或配置问题，核心原因是feeds变量变成了null，导致你尝试访问null.length时触发类型错误。

为什么会出现null？ #

看你的App.js里的componentDidMount逻辑：

let feeds = await AsyncStorage.getItem(key);
feeds = JSON.parse(feeds);
this.setState({ feeds });

当AsyncStorage中还没有存储过数据时，getItem(key)会返回null，而JSON.parse(null)的结果依然是null。这时候你的App组件state里的feeds就变成了null，通过screenProps传递给Feeds组件后，直接访问feeds.length自然会报错。

修复步骤 #

1. 确保AsyncStorage返回值始终转为数组

修改App.js的componentDidMount方法，处理null的情况：

async componentDidMount() {
  try {
    let feeds = await AsyncStorage.getItem(key);
    // 如果feeds是null（无存储数据），就用初始数组，否则解析后使用
    feeds = feeds ? JSON.parse(feeds) : initialState;
    this.setState({ feeds });
  } catch (e) {
    console.log("error from AsyncStorage: ", e);
    // 出错时也确保feeds是数组
    this.setState({ feeds: initialState });
  }
}

2. 在Feeds组件中增加空值判断（双重保险）

即使上面的修复生效，也建议在组件中增加防御性判断，避免类似问题再次发生：

render() {
  // 先给feeds一个默认空数组，防止为null/undefined
  const { screenProps: { feeds = [] } } = this.props;
  return (
    <ScrollView contentContainerStyle={[!feeds.length && { flex: 1 }]}>
      <View style={[!feeds.length && { justifyContent: 'center', flex: 1 }]}>
        { !feeds.length && <CenterMessage message='No saved feeds!' /> }
        { feeds.map((item, index) => (
          <TouchableWithoutFeedback onPress={() => this.navigate(item)} key={index} >
            <View style={styles.feedContainer}>
              <Text style={styles.feed}>{item.feed}</Text>
              <Text style={styles.country}>{item.country}</Text>
            </View>
          </TouchableWithoutFeedback>
        )) }
      </View>
    </ScrollView>
  )
}

关于react-navigation的说明 #

你的导航配置是正常的——screenProps已经正确把feeds传递给了Feeds组件，这个错误和导航库的链接、配置没有关系，完全是数据处理时的空值遗漏导致的。

内容的提问来源于stack exchange，提问作者gbenga ogunbule