React 请求JSON数据后如何读取第一条对象属性，出现undefined报错如何解决

组件首次渲染时，useEffect 内的异步接口请求还未执行完成，此时 items 的初始值是空数组，items[0] 取值为 undefined，直接访问 undefined 的 category 属性就会触发该类型错误。

下面是几种常用的解决方案，按需选择即可：

• 使用可选链操作符规避属性读取报错
  直接修改渲染部分的属性读取代码，可选链会在前面的值为undefined/null时直接返回undefined，不会抛出异常：

  <h2>First Item Category: {items[0]?.category}</h2>
  

• 增加条件渲染，未拿到数据时展示占位内容
  可以判断数组长度，或者额外加loading状态控制渲染逻辑，示例如下：

  return (
    <div>
      {items.length > 0 ? (
        <h2>First Item Category: {items[0].category}</h2>
      ) : (
        <p>加载中...</p>
      )}
    </div>
  );
  

• 也可以给useState设置符合结构的初始占位值，不过灵活性不如前两种方案：

  const [items, setItems] = useState([{category: ''}]);
  

import { useState, useEffect } from 'react';

const apiUrl =
  'https://opentdb.com/api.php?amount=10&difficulty=hard&type=boolean';

function App() {
  const [items, setItems] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const res = await fetch(apiUrl);
        const data = await res.json();
        setItems(data.results);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    }
    fetchData();
  }, []);

  if (loading) return <div>加载中...</div>;
  if (error) return <div>请求出错：{error}</div>;

  return (
    <div>
      <h2>First Item Category: {items[0].category}</h2>
    </div>
  );
}

export default App;

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