[英]React native and react-navigation returning typeerror:null is not an object
我不知道正在創建的這個 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
}}
/>
);
}
}
是不是庫沒有正確鏈接或配置?
問題是您的this.props.screenProps.feeds
參數為空。 檢查您是否將feeds
參數正確傳遞給您的組件
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.