useEffect中出现Cannot read properties of undefined (reading 'forEach')报错求助

问题 #

尝试通过useEffect在数据变化时更新页面渲染，却遇到报错：Cannot read properties of undefined (reading 'forEach')。尽管控制台能正常打印list和listMemo的数组及其值，但执行forEach时仍报错。

相关代码：

const listMemo = useMemo(() => ({ list }), [list]);
useEffect(() => {
  console.log(list)   // 打印数组
  console.log(listMemo)   // 打印数组
  listMemo.list.array.forEach((element, i) => {
    // 业务逻辑代码
  });
}, [listMemo]);

报错说明：代码中试图读取undefined的forEach方法，错误指向listMemo.list.array里的array属性。

问题分析与解决方案 #

核心错误原因 #

你代码里的listMemo.list.array.forEach是错误写法——控制台打印的list本身就是数组，根本不存在array这个嵌套属性，所以调用array.forEach时，array会是undefined，进而触发报错。

修复步骤 #

1. 修正forEach调用路径
   直接对memo后的数组执行遍历，删除多余的.array：

   useEffect(() => {
     console.log(list)
     console.log(listMemo)
     listMemo.list.forEach((element, i) => {
       // 你的业务逻辑
     });
   }, [listMemo]);
   

2. 优化useMemo用法（可选但推荐）
   目前你用useMemo把数组包成了对象，完全没必要，直接memo原数组更简洁，还能避免层级错误：

   const listMemo = useMemo(() => list, [list]);
   // 对应useEffect里直接遍历listMemo
   useEffect(() => {
     console.log(list)
     console.log(listMemo)
     listMemo.forEach((element, i) => {
       // 你的业务逻辑
     });
   }, [listMemo]);
   

3. 处理初始值为空的情况
   为了避免list初始状态为undefined或null时再次报错，可以加前置判断或使用可选链：

   // 方法1：前置判断
   useEffect(() => {
     console.log(list)
     console.log(listMemo)
     if (listMemo.list?.length) {
       listMemo.list.forEach((element, i) => {
         // 你的业务逻辑
       });
     }
   }, [listMemo]);
   
   // 方法2：可选链简化写法
   useEffect(() => {
     console.log(list)
     console.log(listMemo)
     listMemo.list?.forEach((element, i) => {
       // 你的业务逻辑
     });
   }, [listMemo]);
   

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