コンポーネント内の配列のレンダリング

Question

これに関するアドバイスまたはベストプラクティスをお探しの場合私はそれを正しくしていますか？

マイリデューサー：

export default function(){ 
    return [ 
     { 
     id: '01', 
     name: 'Cersei Lannister', 
     city: 'Kings Landings' 
     }, 
     { 
     id: '02', 
     name: 'Margaery Tyrell', 
     city: 'Hign Garden' 
     }, 
     { 
     id: '03', 
     name: 'Daenerys Targaryen', 
     city: 'Dragon Stone' 
     }, 
     { 
     id: '04', 
     name: 'Ygritte', 
     city: 'Free Folk' 
     }, 
     { 
     id: '05', 
     name: 'Arya Stark', 
     city: 'Winter Fell' 
     } 
    ] 
} 

私はgotPeopleとしてallReducersで、この減速機を組み合わせました。

import React, { Component } from 'react'; 
import { Text, View } from 'react-native'; 
import { connect } from 'react-redux'; 

class MyApp extends Component { 

    render(){ 

     const renData = this.props.gotPeople.map((data, idx) => { 
      return (
       <View key={idx}> 
        <Text>{data.id}</Text> 
        <Text>{data.name} of {data.city}</Text> 
       </View> 
      ) 
     }); 

     return(
      <View> 
       {renData} 
      </View> 
     ); 
    } 
} 

function mapStateToProps (state) { 
    return { 
    gotPeople: state.gotPeople 
    } 
} 

export default connect(mapStateToProps)(MyApp) 

そして、私のindex.android.jsにおけるI import MyApp from ./MyApp;とそれが動作<MyApp />ようViewでそれを呼び出す：私は、コンポーネントmyAppでこれを使用しています。すべてが適切に表示されます。これが適切な方法であるかどうかは分かりません。もっと良い方法はありますか？

アドバイスをしてください。

Answer 1

あなたのレデューサーは、実際には「還元」とは見えません。つまり、何も減らされません。しかし、例の目的で使用される単なるプレースホルダだとしましょう。このケースでは、すべてが問題なく表示されますが、コンポーネントを短くするために少し書き直していますが、それを短くするために少し書き直していきます。

const MyApp = ({ gotPeople }) => (
    <View> 
    {gotPeople.map((data, idx) => (
     <View key={idx}> 
     <Text>{data.id}</Text> 
     <Text>{data.name} of {data.city}</Text> 
     </View> 
    )} 
    </View> 
);