小道具を使った反応でのマッピング

Question

私は自分のAPIからグループを取得しましたが、それらがUIと小道具に通っているのがわかりますが、何らかの形でグループの名前を表示しているわけではありません。

これは私がそれをマッピングされた方法です：

<List> 
    {this.props.groups && this.props.groups.map((g) => 
    <ListItem key={g.Id} primaryText={g.Name} onClick={this.handleClickItem(g)} />) } 

    {(!this.props.groups || this.props.groups.length === 0) && "No groups found."} 
</List> 

redux devtools showing the data showing the props hold the data

Answer 1

私は '名前' プロパティの下ケースを見ました： それはg.name」ではない 'g.Name'

べき

Answer 2

プロンプトの出力を見ると、グループオブジェクトのキーは小文字になります。 g.nameがg.Nameではない場合、受信したエラーは大文字と小文字の区別によるものです。また、onClickでは、関数を渡す必要があります。矢印関数を使用しないと、ReactがコンポーネントをレンダリングするときにhandleClickItem関数が呼び出されます。

あなたのListItem要素は次のようになります。

<ListItem 
    key={g.id} 
    primaryText={g.name} 
    onClick={() => this.handleClickItem(g) } 
/> 

Answer 3

私はあなたがキーによって要素にアクセスすることができない理由は、配列の配列をマッピングしていると信じています。

Answer 4

大文字と小文字の区別が問題でした。モデルをインポートしていないので、g.nameは現在使用可能で、動作しています。