React.js读取undefined的noticeNo属性TypeError报错修复方案

报错核心原因 #

组件首次渲染阶段，异步接口getData()还未返回数据，noticeDatas的初始值是空数组，此时sortedItems[0]取值为undefined，JSX中直接读取undefined.noticeNo就会触发类型错误。
你之前尝试的修复代码没有生效，核心问题有三个：

• 空数组[]在JavaScript中是真值，noticeDatas && sortedItems[0]的判断无法拦截空数组取第0位返回undefined的场景
• 直接对state存储的数组调用sort()方法违反React状态不可变原则：Array.sort()是原地修改方法，会直接更改原始state数组，容易引发不可预期的渲染问题
• 没有做渲染兜底，即使item是undefined也直接执行了读取属性的逻辑

正确修复步骤 #

• 排序前先浅拷贝原数组，避免直接修改state值
• 增加存在性判断，当item为undefined（数据加载中/无公告数据）时渲染兜底内容，不执行读取item属性的逻辑
• 移除useEffect中无效的空数组判断，组件挂载时直接触发数据拉取即可

修复后完整代码 #

export const HomeNotice = () => {
  const [noticeDatas, setNoticeDatas] = useState<Array<NoticeDataModel>>([]);

  // 浅拷贝后再排序，不修改原state数组
  const sortedItems = [...noticeDatas].sort((a, b) =>
    a.regDateTime < b.regDateTime ? 1 : b.regDateTime < a.regDateTime ? -1 : 0
  );

  const item = sortedItems[0];

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

  // 无数据时渲染兜底
  if (!item) {
    return (
      <>
        <h3>Notice</h3>
        <div>公告加载中/暂无公告</div>
      </>
    )
  }

  return (
    <>
      <h3>Notice</h3>
      <Link to={"help/notice/" + Number(item.noticeNo)}>
        <div>
          <span>{parse(item.title)}</span>
          <span>{item.regDateTime}</span>
        </div>
      </Link>
    </>
  );

  async function getData() {
    const noticeDataList: Array<NoticeDataModel> = await NoticeDataService.getAll();
    setNoticeDatas(noticeDataList);
  }
};

额外注意点 #

所有依赖异步请求返回值的渲染逻辑，都必须做值存在性校验，不能默认异步数据在首次渲染时就已经存在。如果不想写独立的兜底判断，也可以用可选链操作符临时规避报错，比如item?.noticeNo，但更推荐明确的兜底渲染逻辑，用户体验更好。

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