Реагирует на встроенную и реагирующую навигацию, возвращая typeerror: null не является объектом

Question

Я не знаю, что не так с этим собственным приложением реагировать, которое создает, которое возвращает вышеуказанную ошибку, и я не могу сказать, что это то, что не так с кодом, но у меня есть ощущение, что ошибка происходит от реакции навигации. То, что я хочу сделать, это проверить, если число каналов больше нуля (0), и если это так, отобразить содержание (а), а если нет, НЕТ сохраненных каналов.

Это ошибка, которая имеет

Реагирует на нативную возвращаемую ошибку типа: null не является объектом (оценивает feeds.length)

Реагирует на нативную версию: последняя версия

Реагирует на версию: последняя версия

React-навигационная версия: 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)'
  },  
})

и это приложение. 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 параметр имеет значение null. Проверьте, правильно ли вы передали параметр feeds в ваш компонент