ReactJS中map函数报‘Cannot read properties of undefined’解决方法

在ReactJS中获取数据并将props传递给子组件，但其中一个子组件无法使用map()函数，出现错误：Cannot read properties of undefined (reading 'map')。推测是异步数据问题，但无法解决。

子组件代码 #

function WeeklyForecast({data}) {

      console.log(data);
      
      return (
        <div className='WeeklyForecast'>
          <div className="Prev-Btn">
            <button>&lt;</button>
          </div>
          <div className="Forecast-List">
          {data.map((forecast, index) => (
              <div key={index}>

                <p>{forecast[0]}</p>

              </div>
            ))}
          </div>
          <div className="Next-Btn">
            <button>&gt;</button>
          </div>
        </div>
      )

}

控制台与错误情况 #

移除map()函数后，控制台显示：

• 初始渲染时data为undefined，后续才加载出实际数据
• 错误信息仍为Cannot read properties of undefined (reading 'map')，说明是初始渲染阶段data未定义导致的问题

解决方法 #

1. 给props设置默认空数组

直接在子组件的props解构中给data设置默认值，保证初始渲染时它是可遍历的数组：

function WeeklyForecast({data = []}) {
  // ... 原有代码逻辑不变
}

2. 增加条件渲染判断

在调用map()前先检查data是否存在且有效，避免空值调用：

<div className="Forecast-List">
  {data?.map((forecast, index) => (
    <div key={index}>
      <p>{forecast[0]}</p>
    </div>
  ))}
</div>

或者带加载提示的版本：

<div className="Forecast-List">
  {data && data.length > 0 ? (
    data.map((forecast, index) => (
      <div key={index}>
        <p>{forecast[0]}</p>
      </div>
    ))
  ) : (
    <p>加载中...</p>
  )}
</div>

3. 父组件层面控制渲染时机

在父组件中，确保数据获取完成后再渲染子组件，或者初始传递空数组：

// 父组件示例
import { useState, useEffect } from 'react';
import WeeklyForecast from './WeeklyForecast';

function ParentComponent() {
  const [forecastData, setForecastData] = useState([]);

  useEffect(() => {
    // 模拟异步获取数据
    fetch('你的API地址')
      .then(res => res.json())
      .then(data => setForecastData(data))
      .catch(err => console.log('获取数据失败：', err));
  }, []);

  return (
    <div>
      {/* 初始传递空数组，或等数据加载完成再渲染 */}
      <WeeklyForecast data={forecastData} />
    </div>
  );
}

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