反应本机和反应导航返回类型错误：null 不是对象

Question

我不知道正在创建的这个 React Native 应用程序有什么问题，它返回了上述错误，我真的不能说这是代码的问题，但我有一种感觉，错误来自于 react-navigation。 我想要做的是检查提要的数量是否大于零（0），如果是，则显示内容，如果不显示，则不显示已保存的提要。

这是我的错误

反应本机返回类型错误：null 不是对象（评估 feeds.length）

React-native 版本：最新版本

反应版本：最新版本

反应导航版本：2.0.1

这是代码

import React from 'react'
import {
  View,
  Text,
  StyleSheet,
  TouchableWithoutFeedback,
  ScrollView
} from 'react-native'

import CenterMessage from '../components/CenterMessage'

import { colors } from '../theme'

export default class Feeds extends React.Component {
  static navigationOptions = {
    title: 'Feeds',
    headerTitleStyle: {
      color: 'white',
      fontSize: 20,
      fontWeight: '400'
    }
  }
  navigate = (item) => {
    this.props.navigation.navigate('Feed', { feed: item })
  }
  render() {
    const { screenProps: { feeds } } = this.props
    return (
      <ScrollView  contentContainerStyle={[!feeds.length && { flex: 1 }]}>// error here !feeds.length
        <View style={[!feeds.length && { justifyContent: 'center', flex: 1 }]}>// error here !feeds.length
          {
            !feeds.length && <CenterMessage message='No saved feeds!' />// error here !feeds.length
          }
          {
            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>
    )
  }
}

const styles = StyleSheet.create({
  feedContainer: {
    padding: 10,
    borderBottomWidth: 2,
    borderBottomColor: colors.primary
  },
  feed: {
    fontSize: 20,
  },
  country: {
    color: 'rgba(0, 0, 0, .5)'
  },  
})

这是 app.js

import React, { Component } from "react";
import { Platform, StyleSheet, Text, View, AsyncStorage } from "react-native";
import Tabs from "./src";

const key = "state";

const initialState = [{
  feed: 'Alcohol kills some students sometimes ago',
  title: 'Alcohol',
  id: 0,
  replies: []
},
{
  feed: 'Tokyo',
  title: 'Cigarette',
  id: 1,
  replies: []
}]
export default class App extends Component {
  state = {
    feeds: []
  };
  
  async componentDidMount() {
    try {
      let feeds = await AsyncStorage.getItem(key);
      feeds = JSON.parse(feeds);
      this.setState({ feeds });
    } catch (e) {
      console.log("error from AsyncStorage: ", e);
    }
  }

  addFeed = (feed) => {
    const feeds = this.state.feeds;
    feeds.push(feed);
    this.setState({ feeds });
    AsyncStorage.setItem(key, JSON.stringify(feeds))
      .then(() => console.log("storage updated!"))
      .catch(e => console.log("e: ", e));
  };

  addReply = (Reply, feed) => {
    const index = this.state.feeds.findIndex(item => {
      return item.id === feed.id;
    });
    const chosenFeed = this.state.feeds[index];
    chosenFeed.replies.push(Reply);
    const feeds = [
      ...this.state.feeds.slice(0, index),
      chosenFeed,
      ...this.state.feeds.slice(index + 1)
    ];
    this.setState(
      {
        feeds
      },
      () => {
        AsyncStorage.setItem(key, JSON.stringify(feeds))
          .then(() => console.log("storage updated!"))
          .catch(e => console.log("e: ", e));
      }
    );
  };

  render() {
    return (
      <Tabs
        screenProps={{
          feeds: this.state.feeds,
          addFeed: this.addFeed,
          addReply: this.addReply
        }}
      />
    );
  }
}

是不是库没有正确链接或配置？

Answer 1

问题是您的this.props.screenProps.feeds参数为空。 检查您是否将feeds参数正确传递给您的组件