Javascript 无法从未定义标题的JSON访问数据

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

我想访问food_报告中的标题键，但当我编写 日志（response.data.content.food_report.title） am接收标题未定义

{data_web.food_report &&
  data_web.food_report.title &&
  console.log('aaa', data_web.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: {},
});

import React，{useffect，useState}来自“React”；
从“react native”导入{视图、文本、样式表、平台}；
从“./components/Header.native”导入标头；
从“./components/Header.web”导入HeaderW；
从“../../utils/dateUtils”导入{timestamp，getFullDate}；
从“../../api”导入{vc}；
从“../../API”导入{API}；
将默认功能导出到DaySgoalScreen（道具）{
const{navigation}=props；
const[data_web，getDataweb]=useState（{}）；
const[data_mob，getDataMob]=useState（{}）；
const[width，getWidth]=useState（“”）；
常量SetWidth=（）=>{
getWidth（window.screen.availWidth）；
};
const getdataweb=async（）=>{
试一试{
const id=localStorage.getItem（'user_id'）；
const response=wait API.get(
`/营养/营养计划？儿童id=${id}和事件日期=${timestamp}&vc=${vc}`，
);
console.log（'response'，response.data.content）；
getDataweb（response.data.content）；
}捕获（e）{
控制台日志（e）；
}
};
const getdatanative=async（）=>{
试一试{
const id=props.route.params.id；
const response=wait API.get(
`/营养/营养计划？儿童id=${id}和事件日期=${timestamp}&vc=${vc}`，
);
console.log（'res'，response.data.content）；
getDataMob（response.data.content）；
}捕获（e）{
控制台日志（e）；
}
};
useffect（（）=>{
如果（Platform.OS=='web'）{
getdataweb（）；
}否则{
getdatanative（）；
}
SetWidth（）；
设置间隔（设置宽度，1000）；
}, []);
const web\u data=数据web；
const web_mob=数据移动；
返回(
{Platform.OS=='web'(
414？styles.todaysgoalcardweb:styles.todaysgoalcardmob
}>
{data\u web&&
数据网络！=''&&
数据_web！=未定义&&
数据_web！=null&&
console.log（'aaa'，data\u web.food\u report.title）}
) : (
)}
);
}
const styles=StyleSheet.create({
今天的OALCARDWeb：{
高度：“393px”，
宽度：“600px”，
marginTop:'8px'，
对齐自我：“中心”，
背景颜色：“#ffff”，
填充：10，
},
今天的goalcardmob：{
对齐自我：“中心”，
宽度：“360px”，
高度：“293px”，
背景颜色：“#fff”，
玛金托普：10，
填充：10，
},
今天的主题：{}，
});

添加了上述代码以提供更好的清晰度，希望它能帮助解决此问题 问题是您的初始

data\u web

和

data\u 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

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

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

---

日志中显示的

response.data.content

中的数据是什么？您正在安慰response.data.content吗？错误告诉您，在执行时，

response.data.content.food\u报告

未定义。在react组件生命周期中，您尝试在何处记录此响应值？请更新您的问题以包含完整的代码示例。Hi@NooruddinLakhani已添加完整的代码，请检查是否有帮助