ReactJS实现邮件数组前后切换按钮报错：无法读取subject属性

问题根源 #

• 索引边界判断错误：数组索引从0开始，10个元素的数组最大索引是9（即emailThreads.length - 1）。你的nextEmail函数中判断prevIndex !== emailThreads.length，会导致索引被更新为10，此时emailThreads[10]为undefined，访问subject就会抛出错误。
• setState回调未返回值：你在setEmailIndex的回调里用花括号包裹了逻辑，但没有显式return新的索引值，导致状态无法正确更新。

修正后的代码 #

按钮逻辑代码 #

const [emailIndex, setEmailIndex] = useState(0);
const previousEmail = () => {
  setEmailIndex((prevIndex) => {
    // 索引最小为0，避免出现负数
    return prevIndex > 0 ? prevIndex - 1 : prevIndex;
  });
};
const nextEmail = () => {
  setEmailIndex((prevIndex) => {
    // 索引最大为数组长度减1，避免越界
    return prevIndex < emailThreads.length - 1 ? prevIndex + 1 : prevIndex;
  });
};

控件渲染代码（增加健壮性） #

为了防止数组为空、索引异常等情况引发报错，可以用可选链操作符或条件渲染做保护：

<Controls>
  <Button onClick={previousEmail}>Previous Email</Button>
  <SubjectDetails>
    <Subject>SUBJECT</Subject>
    <SubjectTitle>{emailThreads[emailIndex]?.subject || 'No Subject'}</SubjectTitle>
    <SentAtDetails>Sent At {emailThreads[emailIndex]?.deliveredAt || 'Unknown'}</SentAtDetails>
  </SubjectDetails>
  <Button onClick={nextEmail}>Next Email</Button>
</Controls>

或者用条件渲染确保数据存在再展示：

<Controls>
  <Button onClick={previousEmail}>Previous Email</Button>
  <SubjectDetails>
    <Subject>SUBJECT</Subject>
    {emailThreads[emailIndex] ? (
      <>
        <SubjectTitle>{emailThreads[emailIndex].subject}</SubjectTitle>
        <SentAtDetails>Sent At {emailThreads[emailIndex].deliveredAt}</SentAtDetails>
      </>
    ) : (
      <span>No email data available</span>
    )}
  </SubjectDetails>
  <Button onClick={nextEmail}>Next Email</Button>
</Controls>

额外说明 #

• 可选链操作符?.会在左侧值为undefined或null时直接返回undefined，避免抛出错误；配合||可以设置默认显示文本。
• 条件渲染会在数据不存在时展示备用内容，提升用户体验。

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