Javascript 反应本族语：'；TypeError:undefined不是对象'；使用状态变量

我正在致力于在我的应用程序中实现RSS提要。将状态变量对象数组“NDA_news”传递给渲染函数似乎有问题

我的控制台日志显示，给定的状态数组是一个deepcopy（谢谢lodash），但它不是渲染范围内的对象

如有任何想法、建议等，将不胜感激！我是一名新的react本地开发人员，因此我可能遗漏了一些明显的东西

alumniScreen.js

import React, {Component} from 'react';
import { Text,
    View,
    SafeAreaView,
    ScrollView,
    Image,
    TouchableOpacity,
    StyleSheet,
    Dimensions,
} from 'react-native';
import Modal from 'react-native-modal';
import {COLORS} from './colors.js';     //Color Sheet
import SideMenu from './sideMenu.js';
import Card from './shared/Card.js';
import * as rssParser from 'react-native-rss-parser';
import _ from "lodash";

const WIDTH = Dimensions.get("window").width;
const HEIGHT = Dimensions.get("window").height;


export default class alumni extends React.Component {
    constructor(props: Props) {
        super(props);
        this.state={
            NDA_news: []
        }
    }
    
    componentDidMount(){
        this.fetchData();
  }
    
    fetchData(){
        console.log("...inFetch");
        
        fetch('https://www.notredameacademy.com/rss.cfm?news=0')
        .then(response => response.text())
        .then(responseData => rssParser.parse(responseData))
        .then((rss) => {
            this.state.NDA_news = _.cloneDeep(rss.items);
            if(console.log(this.state.NDA_news === rss.items))
            {
                console.log("this is a shallow copy");
            }
            else
                console.log("this is a deep copy");
            
            console.log(this.state.NDA_news[0].title);
            this.state.NDA_news.bind(this);
            }); 
        
    }
    render() {
        console.log("inRender");
        
        return (
            <SafeAreaView>
                <Text>{this.state.NDA_news[0].title}</Text>
            </SafeAreaView>
        );
    }
}

像这样做

问题

没有

setState

除非您没有使用

setState

您正在调用API及其

async

操作，这就是为什么您需要等待一段时间来加载该函数，这就是为什么您需要一个

load

标志来检查

async

函数调用是否完成

import React，{Component}来自'React'；
进口{
文本，
看法
安全区域视图，
滚动视图，
形象,，
可触摸不透明度，
样式表，
尺寸，
}从“反应本机”；
从“反应本机模态”导入模态；
从'/COLORS.js'导入{COLORS}//色板
从“./SideMenu.js”导入侧菜单；
从“./shared/Card.js”导入卡片；
从“react native rss parser”导入*作为rssParser；
从“lodash”进口；
const WIDTH=Dimensions.get（'window'）.WIDTH；
const HEIGHT=维度.get（'window'）。高度；
导出默认类。组件{
建造师（道具：道具）{
超级（道具）；
此.state={
NDA_新闻：[]，
加载：对，
};
}
componentDidMount（）{
这是fetchData（）；
}
fetchData（）{
console.log（“…感染”）；
取（'https://www.notredameacademy.com/rss.cfm?news=0')
.then（response=>response.text（））
.then（responseData=>rssParser.parse（responseData））
。然后（rss=>{
//this.state.NDA_news=u.cloneDeep（rss.items）；
this.setState（{NDA_news:u.cloneDeep（rss.items），loading:false}，（）=>{
if（console.log（this.state.NDA_news===rss.items））{
log（“这是一个浅拷贝”）；
}否则{
log（“这是一个深度副本”）；
}
console.log（this.state.NDA_news[0].title）；
});
});
}
render（）{
控制台日志（'inRender'）；
如果（this.state.loading）返回加载。。。。。；
返回(
{this.state.NDA_news[0].title}
);
}
}

在设置内容之前，先访问内容，设置加载程序，然后在API完成后设置加载程序。请解释为什么这样做可以改进此答案。是的，我添加了一个解释。这非常有效！非常感谢你，我特别感谢你的解释。我对本地语言和javascript的反应还是一个新手。

info Reloading app...
[Wed Dec 23 2020 14:49:16.194]  BUNDLE  ./index.js

[Wed Dec 23 2020 14:49:17.130]  LOG      Running "NDA" with {"rootTag":1}
[Wed Dec 23 2020 14:49:18.938]  LOG      inRender
[Wed Dec 23 2020 14:49:18.971]  LOG      ...inFetch
[Wed Dec 23 2020 14:49:19.369]  LOG      false
[Wed Dec 23 2020 14:49:19.370]  LOG      Sounds of the Season
[Wed Dec 23 2020 14:50:34.254]  LOG      inRender
[Wed Dec 23 2020 14:50:34.258]  LOG      ...inFetch
[Wed Dec 23 2020 14:50:34.440]  LOG      false
[Wed Dec 23 2020 14:50:34.441]  LOG      this is a deep copy
[Wed Dec 23 2020 14:50:34.442]  LOG      Sounds of the Season
[Wed Dec 23 2020 14:51:48.000]  LOG      inRender
[Wed Dec 23 2020 14:51:48.130]  LOG      inRender
[Wed Dec 23 2020 14:51:48.370]  ERROR    TypeError: undefined is not an object (evaluating 'this.state.NDA_news[0].title')

This error is located at:
    in alumni
    in StaticContainer
    in StaticContainer (at SceneView.tsx:115)
    in EnsureSingleNavigator (at SceneView.tsx:114)
    in SceneView (at useDescriptors.tsx:153)
    in RCTView (at View.js:34)
    in View (at CardContainer.tsx:245)
    in RCTView (at View.js:34)
    in View (at CardContainer.tsx:244)
    in RCTView (at View.js:34)
    in View (at CardSheet.tsx:33)
    in ForwardRef(CardSheet) (at Card.tsx:573)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:555)
    in PanGestureHandler (at GestureHandlerNative.tsx:13)
    in PanGestureHandler (at Card.tsx:549)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:544)
    in RCTView (at View.js:34)
    in View (at Card.tsx:538)
    in Card (at CardContainer.tsx:206)
    in CardContainer (at CardStack.tsx:619)
    in RCTView (at View.js:34)
    in View (at Screens.tsx:84)
    in MaybeScreen (at CardStack.tsx:612)
    in RCTView (at View.js:34)
    in View (at Screens.tsx:54)
    in MaybeScreenContainer (at CardStack.tsx:494)
    in CardStack (at StackView.tsx:462)
    in KeyboardManager (at StackView.tsx:458)
    in RNCSafeAreaProvider (at SafeAreaContext.tsx:74)
    in SafeAreaProvider (at SafeAreaProviderCompat.tsx:42)
    in SafeAreaProviderCompat (at StackView.tsx:455)
    in GestureHandlerRootView (at GestureHandlerRootView.android.js:31)
    in GestureHandlerRootView (at StackView.tsx:454)
    in StackView (at createStackNavigator.tsx:87)
    in StackNavigator (at App.js:24)
    in EnsureSingleNavigator (at BaseNavigationContainer.tsx:409)
    in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:91)
    in ThemeProvider (at NavigationContainer.tsx:90)
    in ForwardRef(NavigationContainer) (at App.js:23)
    in App (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)

import React, { Component } from 'react';
import {
  Text,
  View,
  SafeAreaView,
  ScrollView,
  Image,
  TouchableOpacity,
  StyleSheet,
  Dimensions,
} from 'react-native';
import Modal from 'react-native-modal';
import { COLORS } from './colors.js'; //Color Sheet
import SideMenu from './sideMenu.js';
import Card from './shared/Card.js';
import * as rssParser from 'react-native-rss-parser';
import _ from 'lodash';

const WIDTH = Dimensions.get('window').width;
const HEIGHT = Dimensions.get('window').height;

export default class alumni extends React.Component {
  constructor(props: Props) {
    super(props);
    this.state = {
      NDA_news: [],
      loading: true,
    };
  }

  componentDidMount() {
    this.fetchData();
  }

  fetchData() {
    console.log('...inFetch');

    fetch('https://www.notredameacademy.com/rss.cfm?news=0')
      .then(response => response.text())
      .then(responseData => rssParser.parse(responseData))
      .then(rss => {
        // this.state.NDA_news = _.cloneDeep(rss.items);

        this.setState({ NDA_news: _.cloneDeep(rss.items), loading: false }, () => {
          if (console.log(this.state.NDA_news === rss.items)) {
            console.log('this is a shallow copy');
          } else {
            console.log('this is a deep copy');
          }
          console.log(this.state.NDA_news[0].title);
        });
      });
  }

  render() {
    console.log('inRender');

    if (this.state.loading) return <Text>Loading.....</Text>;

    return (
      <SafeAreaView>
        <Text>{this.state.NDA_news[0].title}</Text>
      </SafeAreaView>
    );
  }
}