react-native - 查看项目详细信息和 TypeError 时出错：无法读取未定义的属性“标题”-Expo React Native

Question

尝试访问文章的详细信息时，它会打印以下错误消息，并添加以下代码行：

  13 | return (
  14 |  <View>
  15 |      <View>
> 16 |          <Text>{article.title}</Text>
     | ^  17 |      </View>
  18 |  </View>
  19 | )

文章列表 NewsListScreen.js

import React, { useEffect } from 'react';
import { StyleSheet, Text, View, FlatList } from 'react-native';
import { useSelector, useDispatch } from 'react-redux';
import * as NewsAction from '../redux/actions/NewsAction';

import Card from '../components/Card';

const NewsListScreen = props => {
    
    const dispatch = useDispatch();

    useEffect(() => {
        dispatch(NewsAction.fetchArticles())
    }, [dispatch]);

    const articles = useSelector(state => state.news.articles);
    console.log(articles);  
    
    return (
        <FlatList
            data={articles}
            keyExtractor={item => item.url}
            renderItem={({item}) => (
                <Card navigation={props.navigation}
                    title={item.title}
                    description={item.description}
                    image={item.urlToImage}
                    url={item.url}
                />
            )}
        />
    )
}

const styles = StyleSheet.create ({
});

export default NewsListScreen;

打印商品详情 NewsItemScreen.js

import React from 'react';
import { StyleSheet, Text, View, Platform, ImageBackground } from 'react-native';
import { useSelector } from 'react-redux';

const NewsItemScreen = props => {

    const articleUrl = props.navigation.getParam('articleUrl');
    //console.log(articleUrl);

    const article = useSelector(state => state.news.articles.find(article => article.url === articleUrl));
    //console.log(article);

    return (
        <View>
            <View>
                <Text>{article.title}</Text>
            </View>
        </View>
    )
}

const styles = StyleSheet.create ({
});

export default NewsItemScreen;

当我用它替换它<Text>{article.title}</Text>时，<Text>Hello!</Text>它会显示没有错误的丝网印刷Hello!。

这些文章是列出的文章和正确显示在控制台中的文章，与我尝试查看完整详细信息的文章相同，但我收到了已经提到的错误消息。

author: "Megan Rose Dickey"
content: "Hellllooooo, 2021! Welcome back to Human Capital, a weekly newsletter that details the latest in the realms of labor, and diversity and inclusion.
↵Not a ton happened this week so I figured Id use th… [+6204 chars]"
description: "Hellllooooo, 2021! Welcome back to Human Capital, a weekly newsletter that details the latest in the realms of labor, and diversity and inclusion. Not a ton happened this week so I figured I’d use the time to look back on some of the more notable labor storie…"
publishedAt: "2021-01-02T20:00:52Z"
source:
id: "techcrunch"
name: "TechCrunch"
__proto__: Object
title: "Human Capital: The biggest labor stories of 2020"
url: "https://techcrunch.com/2021/01/02/human-capital-the-biggest-labor-stories-of-2020/"
urlToImage: "https://techcrunch.com/wp-content/uploads/2020/08/GettyImages-1142216084.jpg?w=601"

代码项目：https ://github.com/Publisere/app-news-react

注意：需要注意的是数据确实存在，不是空数据。

标签： react-nativereact-reduxexpo

Answer 1

好吧...似乎article没有定义。

第一次渲染这个组件时，Article 是未定义的，所以你只需要等待（或者显示一个加载器，空页面，我让你来管理），然后再渲染文章数据。

import React from 'react';
import { StyleSheet, Text, View, Platform, ImageBackground } from 'react-native';
import { useSelector } from 'react-redux';

const NewsItemScreen = props => {

    const articleUrl = props.navigation.getParam('articleUrl');

    const article = useSelector(state => state.news.articles.find(article => article.url === articleUrl));

    if (!article) return null; 

    return (
        <View>
            <View>
                <Text>{article.title}</Text>
            </View>
        </View>
    )
}

const styles = StyleSheet.create ({
});

export default NewsItemScreen;