데 문제가

Question

반응에 상태지도 나 소품지도 아래 목록은 여기 내 tbody 태그 안에 무슨이다.

시도 된 로깅 this.props.listingData & 시도했습니다.

[{"location_id":1,"location":"HKG","description":"Hong Kong","update_by":null,"update_time":null,"create_by":null,"create_time":null,"rec_state":0},{"location_id":2,"location":"KUL","description":"Kuala Lumpur","update_by":null,"update_time":null,"create_by":null,"create_time":null,"rec_state":0}] 

가 작동해야 하는가 : 여기 내가 사용하는 샘플 map 데이터

입니까? 내 getDefaultProps

:

getDefaultProps() { 
     return { 
      //value: 'default value' //called as this.props.value 
      listingData: [{"location_id":1,"location":"HKG","description":"Hong Kong","update_by":null,"update_time":null,"create_by":null,"create_time":null,"rec_state":0},{"location_id":2,"location":"KUL","description":"Kuala Lumpur","update_by":null,"update_time":null,"create_by":null,"create_time":null,"rec_state":0}] 
     }; 
    } 

이 시도하고 여전히 오류가 발생.

Answer 1

당신은 문서 https://facebook.github.io/react/docs/reusable-components.html#default-prop-values에 따라, 당신은 구성 요소를 만들 때 좋은 방법입니다 기본 소품을 정의 할 필요가 : 정적 속성 지원

var MyComponent = React.createClass({ 

    getDefaultProps: function() { 
    return { 
     listingData: [] 
    }; 
    }, 

    render: function() { 
    //... 
    } 

}); 

또는 es2015

class MyComponent extends React.Component { 

    render() { 
    //... 
    } 

} 

MyComponent.defaultProps = { 
    listingData: [] 
} 

class MyComponent extends React.Component { 

    static defaultProps = { 
    listingData: [] 
    }; 

    render() { 
    //... 
    } 

} 

Answer 2

비동기 가져 오기를 수행하고이 구성 요소에 대한 응답을 응답으로 보내는 것과 같은 소리가납니다. 즉, 구성 요소가 처음 렌더링 될 때 정의되지 않습니다 (render 안에 중단 점을 넣고 직접보십시오).

위에서 보았 듯이 undefined에 map을 부를 수 없으므로 데이터가 아직없는 경우 다른 것을 반환해야합니다. 개인적으로 나는 다음 라인을 따라 뭔가를 선호합니다 :

if (!this.props.listingData) return null; 

return this.props.listingData.map(listingData => // ... 

분명히 다른 방법으로 이것을 쓸 수 있습니다. 또는 기본 소품을 제공 할 수 있습니다.

참고 location.id이 고유하면 루프 인덱스가 아닌 key으로 사용해야합니다.