如何在地圖對象中呈現減速

Question

如何顯示在組件以下減速器（myData）做：

const initialState = [   // <= STATE AS ARRAY 
    { 
    id: '01', 
    name: 'Name One', 
    number: 11 
    }, 
    { 
    id: '02', 
    name: 'Name Two', 
    number: 22 
    } 
]; 

const initialStateNew = { // <= STATE AS OBJECT 
1: { 
    id: '01', 
    name: 'Name One', 
    number: 11 
    }, 
2: { 
    id: '02', 
    name: 'Name Two', 
    number: 22 
    } 
} 

export default function myData (state = initialStateNew, action) { 
    switch (action.type) { 
    case "somthing": 
     return { 
     ...state 
     } 
    default: 
     return state 
    } 
} 

我已經combinedReducers這一個，人稱其爲myData和使用mapStateToProps和mapDispatchToProps到將減速器映射到組件中。

現在，下面的代碼工作使用initialState時：

const renData = this.props.myData.map((data, idx) => { 
    return (
    <View key={idx}> 
     <TouchableOpacity 
     onPress={() => Alert.alert("ID: ", data.id)} 
     > 
     <Text style={styles.welcome}>{data.id} - {data.name} - {data.number}</Text> 
     </TouchableOpacity> 
    </View> 
    ) 
}); 

代碼工作的原因，而是一個數組。如何在renData中映射對象initialStateNew？ {createUI}：

---

EDIT1

this.props.newData從mapStateToProps

const createUI =() => { 
    let uiItems = []; 

    for(let i in this.props.newData) 
    uiItems.push(<Text key={data[i].id}> {data[i].name} </Text>) 

    return uiItems; 
} 

使用在View到來。收到錯誤：

---

EDIT2

const createUI =() => { 
    let uiItems = []; 

    for(let i in this.props.newData) 
    uiItems.push(
     <Text key={this.props.newData[i].id}> 
      {this.props.newData[i].name} 
     </Text> 
     ) 
    return uiItems; 
} 

const renData = this.createUI.map((data, idx) => { 
    return (
    <View key={idx}> 
     <TouchableOpacity 
     onPress={() => Alert.alert("ID: ", data.id)} 
     > 
     <Text style={styles.welcome}>{data.id} - {data.name} - {data.number}</Text> 
     </TouchableOpacity> 
    </View> 
) 
}); 

Answer 1

只要改變你renData這樣

const renData = Object.keys(this.props.myData || []).map((key, idx) => { 
    let data = this.props.myData[key] 
    return (
    <View key={idx}> 
     <TouchableOpacity 
     onPress={() => Alert.alert("ID: ", data.id)} 
     > 
     <Text style={styles.welcome}>{data.id} - {data.name} - {data.number}</Text> 
     </TouchableOpacity> 
    </View> 
    ) 
}); 

編輯：

Object.keys(this.props.myData)返回鍵陣列（如果this.props.myData是一個對象）或返回索引的陣列（即 [「0」，「1」，...]）如果它是一個數組。

this.props.myData || []表示如果this.props.myData爲空或未定義，則僅使用一個空數組。這是爲了當this.props.myData爲空或未定義時它不會拋出不必要的錯誤。

Answer 2

它的Loop on Object in ReactJS重複，但OP不想使用map所以替代的解決方案。

從渲染方法中調用函數並在對象上使用for循環來創建ui項並返回結果。

像這樣：

_

createUI(){ 

    if(!Object.keys(data).length) return null; 

    let uiItems = []; 
    for(let i in data) 
     uiItems.push(
      <View key={data[i].id}> 
       <TouchableOpacity 
        onPress={() => Alert.alert("ID: ", data[i].id)} 
       > 
        <Text style={styles.welcome}>{data[i].id} - {data[i].name} - {data[i].number}</Text> 
       </TouchableOpacity> 
      </View> 
     ) 

    return uiItems; 
} 

render(){ 
    return(
     <div> 
      {this._createUI()} 
     </div> 
    ) 
} 

檢查這個片段：

const initialStateNew = { 
 
1: { 
 
    id: '01', 
 
    name: 'Name One', 
 
    number: 11 
 
    }, 
 
2: { 
 
    id: '02', 
 
    name: 'Name Two', 
 
    number: 22 
 
    } 
 
} 
 

 
for(let i in initialStateNew) 
 
    console.log('key, value = ', i, initialStateNew[i].name);