使用useEffect和useState获取数据解构时遇TypeError错误求助

问题描述 #

使用React的useEffect和useState钩子获取数据并解构时，出现以下错误：

TypeError: Cannot destructure property 'company' of 'jobs[value]' as it is undefined

相关代码：

import React, { useState, useEffect } from 'react';
import { FaAngleDoubleRight } from 'react-icons/fa';
import Jobs from './Jobs';
const url = 'https://course-api.com/react-tabs-project';

function App() {
  const [loading, setLoading] = useState(true);
  const [jobs, setJobs] = useState([]);
  const [value, setValue] = useState(0);

  const fetchJobs = async () => {
    const response = await fetch(url);
    const newJobs = await response.json();
    setJobs(newJobs);
    setLoading(false);
  };

  useEffect(() => {
    fetchJobs();
  }, []);

  const { company, dates, duties, title } = jobs[value];
  console.log(jobs[value]);

  return (
    <section className='section '>
      <div className='title'>
        <h2>experience</h2>
        <div className='underline'></div>
      </div>
    </section>
  );
}

export default App;

控制台显示，前两次渲染时jobs[value]为undefined，直到数据请求完成后才会变为有效对象。

问题原因 #

组件初始渲染阶段，jobs的初始值是空数组[]，此时jobs[0]（value初始值为0）是undefined，直接对undefined进行解构操作会触发TypeError。

解决方案 #

方案1：利用loading状态做条件渲染

借助已有的loading状态，在数据加载完成前跳过解构和相关渲染逻辑：

function App() {
  // 原有状态定义、fetchJobs函数、useEffect逻辑保持不变

  // 加载中时返回加载提示
  if (loading) {
    return <div>加载中...</div>;
  }

  // 数据加载完成后再解构
  const { company, dates, duties, title } = jobs[value];

  return (
    <section className='section '>
      <div className='title'>
        <h2>experience</h2>
        <div className='underline'></div>
      </div>
      {/* 后续渲染内容 */}
    </section>
  );
}

方案2：使用可选链或默认值规避undefined

如果不需要显示加载状态，可以通过给解构对象设置默认空对象，或者用可选链操作符避免报错：

• 给解构对象设置默认值：

const { company, dates, duties, title } = jobs[value] || {};

• 使用可选链单独取值：

const company = jobs[value]?.company;
const dates = jobs[value]?.dates;
const duties = jobs[value]?.duties;
const title = jobs[value]?.title;

方案3：给jobs设置符合结构的初始值

将jobs的初始状态从空数组改为包含一个空对象的数组，确保jobs[value]始终是对象：

const [jobs, setJobs] = useState([{}]);

注意：这种方式仅作为临时规避方案，需确保后续接口返回的数据结构与初始值一致，避免后续出现其他问题。

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