マップredux状態を反復してコンポーネント内に複数のコンポーネントを作成する

Question

私はreact-redux-mapbox-glライブラリを使用しています。 Mapboxコンポーネント内に複数のオーバーレイコンポーネントを作成するためにマップしたいスポットがあります。しかし、配列をマップしようとすると、私は常に定義されていないエラーが発生します。私はReact/Reduxを初めて熟知しているので、その問題が何であるか分かりません。

以下の私のコンポーネント：

import React from 'react'; 
import Mapbox from 'react-redux-mapbox-gl'; 

import SpotsOverlay from './SpotsOverlay' 

const mapStateToProps = state => ({ 
    spots: state.homemap.spots 
}) 

class HomeMap extends React.Component { 

    render(){ 

    return (

    <Mapbox 
     mapboxgl={mapboxgl} 
     accessToken={mapAccessToken} 
     getMap={this.getMap} 
     style={this.mapStyle} 
     options={this.mapOptions} 
    > 

     { 
     this.props.spots.map(spot =>{ 
     return (
      <SpotsOverlay 
      overlay={this.overlay} 
      key={spot.id}/> 
     ); 
     }) 
    } 

    </Mapbox> 
); 
} 
} 

Answer 1

役立つかもしれない復帰方法の外にマッピングを行います。

class HomeMap extends React.Component { 

    render(){ 

     let spots = []; 

     if(this.props.spots) { 
      spots = this.props.spots.map(spot =>{ 
       return (
        <SpotsOverlay 
         overlay={this.overlay} 
         key={spot.id}/> 
       ); 
      }); 
     } 

     return (

      <Mapbox 
       mapboxgl={mapboxgl} 
       accessToken={mapAccessToken} 
       getMap={this.getMap} 
       style={this.mapStyle} 
       options={this.mapOptions} 
      > 
       {spots} 
      </Mapbox> 
     ); 
    } 
} 

@MayankShuklaが彼のコメントで言ったように、これはうまく動作する理由はstate.homemap.spotsが不定となりますので、あなたが使用していたとき

は当初、状態は{}である減速機ということです定義されていない地図