调用education[0]报Uncaught TypeError，无法实现数组元素逐个展示

为什么访问education[0]会报错？ #

你看到JSON.stringify(education)有数据，但渲染时提示education[0] undefined，大概率是初始渲染时education还没拿到数据——比如你是从接口异步加载的education，组件第一次渲染时education还是初始的undefined或者空值，这时候直接访问education[0]就会抛出错误。

另外也可能是你把education的初始状态设成了undefined，而不是空数组[]，导致数组还没初始化就去访问索引。

修复访问报错的方法 #

1. 初始化设为空数组
   如果是用React这类框架，初始化状态时给education设默认值[]：

   const [education, setEducation] = useState([]);
   

   这样即使数据没加载完，education也是一个空数组，访问education[0]只会得到undefined，不会报错。

2. 加条件渲染或可选链

   • 用可选链操作符?.规避报错：

     <p>{education[0]?._id}</p>
     

   • 或者判断数组长度后再渲染：

     {education.length > 0 && <p>{education[0]._id}</p>}
     

实现“Next”按钮逐个展示元素 #

只需要维护一个当前索引的状态，配合数组长度判断即可：

// 1. 初始化当前索引状态
const [currentIndex, setCurrentIndex] = useState(0);

// 2. Next按钮点击事件
const handleNext = () => {
  // 到最后一个元素时停止切换
  if (currentIndex < education.length - 1) {
    setCurrentIndex(prev => prev + 1);
  }
};

// 3. 渲染当前元素
return (
  <div>
    {education.length > 0 ? (
      <div>
        <p>{education[currentIndex].eduTitle}</p>
        <p>{education[currentIndex]._id}</p>
        <button onClick={handleNext}>Next</button>
      </div>
    ) : (
      <p>加载中...</p>
    )}
  </div>
);

这样点击Next按钮时，currentIndex会递增，直到数组最后一个元素，就能逐个展示数组里的内容了。

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