React使用axios获取外部API数据时报TypeError错误如何修复

TypeError: undefined is not an object (evaluating 'drinkList.drinks[0]')
该报错由三个常见问题共同触发：

1. Home组件中drinkList初始值设置错误：你初始赋值为空数组[]，但API返回的response.data是包含drinks字段的对象，空数组本身不存在drinks属性，首次渲染时访问drinkList.drinks直接返回undefined。
2. Drinks组件非空校验逻辑失效：JS中空数组的布尔值为true，所以if (!drinkList) return <></>的判断对初始空数组完全不生效，代码会继续执行访问不存在的属性。
3. 未覆盖API返回空结果的场景：如果搜索的饮品不存在，API返回的drinks字段会是null或者空数组，此时访问drinks[0]也会触发报错。
   额外小问题：drinkName是输入框绑定的字符串，初始值不应该设为数组[]。

• 第一步：修正Home组件的状态初始值

// 原错误代码
const [drinkName, setDrinkName]= useState([]);
const [drinkList, setDrinkList] = useState([]);
// 修改后代码
const [drinkName, setDrinkName]= useState('');
const [drinkList, setDrinkList] = useState(null);

• 第二步：优化Drinks组件的校验逻辑，增加对drinks字段的判断，推荐使用可选链简化写法：

import React from "react";

function Drinks({ drinkList }) {
  // 校验drinkList存在、drinks字段存在、且drinks数组有内容才渲染
  if (!drinkList?.drinks?.length) return <></>;
  return (
    <section className="drinkCard">
      <h1>{drinkList.drinks[0].strDrink}</h1>
    </section>
  );
}

export default Drinks;

如果需要兼容不支持可选链的环境，可以改为多层判断：

if (!drinkList || !drinkList.drinks || !drinkList.drinks.length) return <></>;

• 可选优化：可以额外增加加载状态、无结果提示，比如搜索不到对应饮品时展示“未找到相关饮品”的提示，优化用户体验。

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