React-Google-Maps 및 Redux로 비동기 표시 마커

React-Redux 상태에서 Google지도의 마커를 렌더링하려하지만 "정의되지 않은지도의 속성을 읽을 수 없습니다"및 " 나는을 console.log()를 두 번 일이 있기 때문에 비동기 문제를 알고React-Google-Maps 및 Redux로 비동기 표시 마커

class Map extends Component { 
    constructor() { 
    super() 
    this.state = {} 
    } 

    componentDidMount() { 
    APIManager.get('/api/hike', null, (err, response) => { 
     if (err) { 
     return 
     } 
     this.props.hikesReceived(response.results) 
    }) 
    } 

    componentDidUpdate() { 
    console.log('updated list of hikes ' + JSON.stringify(this.props.hikes)) 
    } 

    render() { 
    const hikes = this.props.hikes.map((hike, i) => { 
     const hikeMarker = { 
     latlng: { 
      lat: hike.location.lat, 
      lng: hike.location.lng 
     } 
     } 
     return <Markey key={i} {...hikeMarker} /> 
    }) 

    return (
     <GoogleMapLoader 
     containerElement = { this.props.mapContainer } 
     googleMapElement = { 
      <GoogleMap 
      defaultZoom={10} 
      defaultCenter={this.props.center} 
      options={{streetViewControl: false, mapTypeControl: false}} 
      onClick={this.addMarker.bind(this)} > 
      <Marker {...hikeMarker}/> 
      </GoogleMap> 
     } /> 
    ) 
    } 
} 

const stateToProps = (state) => { 
    return { 
    hikes: state.hike.list, 
    } 
} 

const dispatchToProps = (dispatch) => { 
    return { 
    hikesReceived: (hikes) => dispatch(actions.hikesReceived(hikes)), 
    } 
} 

export default connect(stateToProps, dispatchToProps)(Map)

을 널 (null)의 특성 '_currentElement'을 읽을 수 없습니다 것은 여기 내 구성 요소입니다. 처음에는 비어 있고 두 번째로는 데이터로 렌더링됩니다. 더미 데이터를 사용하면 마커도 오류없이 표시됩니다.

this.props에 데이터가 있으면 렌더링하거나 렌더링하기 위해 맵을 기다리는 방법은 무엇입니까?

출처

2017-02-02 crash springfield

거짓 나는 "해봤 –

경우 (this.props.hikes == null의 || 정의되지 않은) {return : false} "오류를 두 번 렌더링합니다. –

사실"false "가 작동했습니다. 프런트 엔드와 백엔드 사이에 다양한 명명 문제가있었습니다. 감사합니다 @ SELOLOLOBO! –

문제의 절반은 데이터베이스에서 이름이 변경되었습니다. 나머지 절반은 함께 해결되었다 : 당신이 정의되지 않은/빈 데이터/null 또는 어떤 확인하고 바로 반환 할 수

if (this.props.hikes == null || undefined) {return: false}

출처

2017-02-02 16:01:07

React-Google-Maps 및 Redux로 비동기 표시 마커

답변

관련 문제