苦労

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として使用する必要があります。