APIからのデータが出力されていません| React、Redux

Question

私はAPIからデータを取得していますが、ReactとReduxを使用しています。私は正常にAPIからデータを取得しています。 は、ここでの出力とはconsole.logです：

console.log(this.props.customer.data)

しかし、私はそれは私のリアクトアプリで表示することができません。私は自分の問題は本当に基本的なものだと考えていますが、なぜこれがうまくいかないのか分かりません。

私はreturnのこの内部をやってみました：

{this.props.customer.data.map(customers => <p>{customers.name}</p>)} 

しかし、私はエラーを取得しています：TypeError: Cannot read property 'map' of undefined。

なぜこのようなことが起こっているのか分かりましたら、教えてください。ありがとう！

（私はそれが複数の顧客を表しているので、私は、単数形で私の小道具を持つべきではないことを知っている...）

Answer 1

問題は、customer.dataの初期値がないことです。

export function customer(state = [], action) { 
    ... 
} 

配列にcustomerを設定している：あなたは、あなたの減速は、このような設定であることを別のコメントで述べました。代わりに、あなたの減速機で次のようなことをしてください：

const initialState = { 
    data: [] // <-- Default value for customer.data is an empty array 
}; 

export function customer(state = initialState, action) { 
    ... 
} 

Answer 2

あなたはAPIからデータを取得した場合、あなたのようなものを試してみる必要がありますので、あなたは、最初のレンダリングにはデータがありませんこれは：

{this.props.customer.data ? this.props.customer.data.map(customers => 
     <p> 
     {customers.name} 
     </p>) : null} 

Answer 3

あなたは基本的に未定義/ヌルオブジェクトを反復しようとしています。良い方法は、reducexストアの配列の初期状態を空の配列に設定することです。そのため、配列に実際に存在するかどうかをチェックするために、コンポーネントに追加のチェックを追加する必要はありません。 Array.prototype.mapは、空の配列を繰り返し処理することはなく、何も描画しません。減速機の初期状態をcustomer.dataに空の配列に設定してください。