React Native渲染时报undefined is not an object错误如何解决

报错原因 #

报错本质是调用attractions.map时，attractions的值为undefined，不存在可调用map方法的数组对象。

常见触发场景及修复方案 #

• 场景1：Redux reducer初始值配置错误
  检查attractions模块对应的reducer代码，初始state中attractions字段必须设置为空数组[]，禁止设置为null、undefined或不声明该字段。
• 场景2：异步请求callback触发时机错误
  检查attractions/GET_Attractions对应的异步逻辑（redux-saga/redux-thunk代码），必须在接口请求成功、将返回的景点数组更新到Redux后，再调用传入的callback。如果请求发起后立即调用callback，会导致loading状态提前关闭，此时Redux中还未更新attractions数据。
• 场景3：未做取值兜底防御
  可通过以下两种方案增加防御逻辑，从根源避免该类报错：
  1. 改写mapStateToProps，增加取值兜底：

  const mapStateToProps = state => {
    return {
      attractions: state.attractions?.attractions ?? [],
    };
  };
  

  2. 改写renderMapMarker方法，调用map前先做数组类型校验：

  renderMapMarker = () => {
    const {attractions} = this.props;
    if (!Array.isArray(attractions)) return null;
    return attractions.map(marker => {
      return (
        <Marker
          key={marker.caseId}
          title={marker.caseName}
          description="點擊查看詳細資料"
          coordinate={{
            latitude: marker.latitude,
            longitude: marker.longitude,
          }}
        />
      );
    });
  };
  

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