React请求后端数据后访问location内部属性报TypeError如何解决？

问题根因 #

1. 你的posts状态初始值被设置为空数组[]，但接口返回的是对象类型。组件第一次渲染时，useEffect中的异步请求还未完成，此时posts是空数组，不存在location属性，直接访问posts.location.latitude本质是读取undefined的latitude属性，就会抛出对应的类型错误。
2. 你看到console.log(posts)能打印出完整数据，是浏览器控制台的引用特性：打印对象时虽然还处于初始空值状态，但你手动展开控制台的对象时，异步请求已经完成、状态已经更新为接口返回的完整数据，造成了"数据一开始就存在"的假象。
3. 单独打印posts.location不会报错，是因为打印undefined本身属于合法操作，只有尝试读取undefined的属性时才会触发报错。

解决方法 #

• 修正状态初始值，和接口返回的类型对齐，把初始值从空数组改为空对象：

// 原代码
const [posts, getPosts] = useState([]);
// 修改后
const [posts, getPosts] = useState({});

• 访问嵌套属性时使用可选链操作符?.，避免属性不存在时抛出错误，可选链会在链路中某一层值为undefined/null时直接返回undefined，不会中断代码运行：

// 原代码
console.log(posts.location.latitude);
console.log(posts.location.longitude);
// 修改后
console.log(posts?.location?.latitude);
console.log(posts?.location?.longitude);

如果需要在JSX中渲染对应值，还可以配合空值合并运算符??设置兜底展示内容：

<div>纬度：{posts?.location?.latitude ?? '数据加载中'}</div>
<div>经度：{posts?.location?.longitude ?? '数据加载中'}</div>

如果你的运行环境不支持ES2020的可选链语法，可以改用短路运算符&&实现同等效果：

console.log(posts.location && posts.location.latitude);

• 补全useEffect的依赖项，把路由参数id加入依赖数组，避免id变化时不会重新拉取对应的数据：

useEffect(()=>{
    getOnePost();
}, [id]);

内容的提问来源于stack exchange，提问作者Harshana