React Native报错：Cannot read property 'map' of undefined 求助排查

错误核心原因 #

这个报错是因为你在undefined值上调用了数组的map方法——当props.restaurantsData未初始化、异步请求还未返回数据时，它的值是undefined，此时调用map就会触发错误。另外你代码中还存在拼写错误，会导致后续渲染失败。

分步修复方案 #

• 给状态设置初始空数组
  在Home.js中，必须用useState给restaurantsData初始化空数组，确保即使请求未完成，传给子组件的也是合法数组：

  import { useState } from 'react';
  
  // 在组件内部添加
  const [restaurantsData, setRestaurantsData] = useState([]);
  

• 确保异步请求正确更新状态
  检查getRestaurantsFromYelp函数，确认它正确将接口返回的数据存入状态：

  const getRestaurantsFromYelp = async () => {
    try {
      const response = await fetch('你的Yelp API接口地址');
      const result = await response.json();
      // 根据Yelp API返回的数据结构调整，通常商家数据在businesses字段下
      setRestaurantsData(result.businesses);
    } catch (error) {
      console.error('请求失败:', error);
    }
  };
  

• 修正拼写错误
  RestaurantItems.js中，你把循环变量restaurant拼写成了restaurtant，三处都需要修正：

  {props.restaurantsData.map((restaurant, index) => (
    <View key={index} style={{ marginTop: 10, padding: 15, backgroundColor: 'white' }}>
      <RestaurantImage image={restaurant.image_url} />
      <RestaurantInfo name={restaurant.name} rating={restaurant.rating} />
    </View>
  ))}
  

• 可选：添加加载状态提示
  若想优化用户体验，可在数据未加载完成时显示提示：

  export default function RestaurantItems(props) {
    const { restaurantsData } = props;
    if (!restaurantsData || restaurantsData.length === 0) {
      return <Text style={{ textAlign: 'center', padding: 20 }}>加载中...</Text>;
    }
    return (
      <TouchableOpacity activeOpacity={1} style={{ marginBottom: 30 }}>
        {restaurantsData.map((restaurant, index) => (
          <View key={index} style={{ marginTop: 10, padding: 15, backgroundColor: 'white' }}>
            <RestaurantImage image={restaurant.image_url} />
            <RestaurantInfo name={restaurant.name} rating={restaurant.rating} />
          </View>
        ))}
      </TouchableOpacity>
    );
  }
  

关于你的疑问 #

不需要额外定义map方法——map是JavaScript数组的原生内置方法，只要调用它的对象是合法数组就能正常使用，问题根源是你调用map时的对象是undefined而非数组。

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