无法访问来自 JSON 的数据，接收标题未定义

Question

我正在尝试访问以下 JSON 数据：

我想访问 food_report 中的标题键，但是当我写 console.log(response.data.content.food_report.title) 我收到的标题未定义

知道哪里出了问题吗？任何帮助将不胜感激

我用过的完整代码是：

import React, {useEffect, useState} from 'react';
import {View, Text, StyleSheet, Platform} from 'react-native';
import Header from './components/Header.native';
import HeaderW from './components/Header.web';
import {timestamp, getFullDate} from '../../utils/dateUtils';
import {vc} from '../../api';
import {API} from '../../api';

export default function TodaysGoalScreen(props) {
  const {navigation} = props;
  const [data_web, getDataweb] = useState({});
  const [data_mob, getDataMob] = useState({});
  const [width, getWidth] = useState('');
  const SetWidth = () => {
    getWidth(window.screen.availWidth);
  };
  const getdataweb = async () => {
    try {
      const id = localStorage.getItem('user_id');
      const response = await API.get(
        `/nutrition/nutri-plan?child_id=${id}&event_date=${timestamp}&vc=${vc}`,
      );
      console.log('response', response.data.content);
      getDataweb(response.data.content);
    } catch (e) {
      console.log(e);
    }
  };
  const getdatanative = async () => {
    try {
      const id = props.route.params.id;
      const response = await API.get(
        `/nutrition/nutri-plan?child_id=${id}&event_date=${timestamp}&vc=${vc}`,
      );
      console.log('res', response.data.content);
      getDataMob(response.data.content);
    } catch (e) {
      console.log(e);
    }
  };
  useEffect(() => {
    if (Platform.OS == 'web') {
      getdataweb();
    } else {
      getdatanative();
    }
    SetWidth();
    setInterval(SetWidth, 1000);
  }, []);
  const web_data = data_web;
  const web_mob = data_mob;
  return (
    <View style={{backgroundColor: '#E5E5E5', flex: 1}}>
      {Platform.OS == 'web' ? (
        <View>
          <HeaderW data={data_web} />
          <View
            style={
              width > 414 ? styles.todaysgoalcardweb : styles.todaysgoalcardmob
            }>
            {data_web &&
              data_web != '' &&
              data_web != undefined &&
              data_web != null &&
              console.log('aaa', data_web.food_report.title)}
          </View>
        </View>
      ) : (
        <Header data={data_mob} />
      )}
    </View>
  );
}
const styles = StyleSheet.create({
  todaysgoalcardweb: {
    height: '393px',
    width: '600px',
    marginTop: '8px',
    alignSelf: 'center',
    backgroundColor: '#ffff',
    padding: 10,
  },
  todaysgoalcardmob: {
    alignSelf: 'center',
    width: '360px',
    height: '293px',
    backgroundColor: '#fff',
    marginTop: 10,
    padding: 10,
  },
  todaysgoaltitle: {},
});

添加了上面的代码以提供更好的清晰度希望它会有所帮助

Answer 1

问题

问题是您的初始 data_web 和 data_mob 状态是空对象

const [data_web, getDataweb] = useState({});
const [data_mob, getDataMob] = useState({});

但您尝试在初始渲染

上访问深度嵌套的属性

{data_web &&               // <-- data_web defined so truthy value
  data_web != '' &&        // <-- data_web is object so true
  data_web != undefined && // <-- data_web defined so true
  data_web != null &&      // <-- data_web is object so again true
  console.log('aaa', data_web.food_report.title)} // <-- blow up because data_web.food_report is undefined

无法访问 title 属性因为 data_web.food_report 未定义。

解决方案

如果可用，请使用可选链接

{console.log('aaa', data_web.food_report?.title)}

对每个可能未定义的嵌套级别使用常规空值检查

{data_web.food_report &&
  data_web.food_report.title &&
  console.log('aaa', data_web.food_report.title)
}

无法访问来自 JSON 的数据，接收标题未定义

Cannot access data from JSON receiving title is undefined

javascript

reactjs

react-native

react-native-android

react-native-ios

问题

解决方案