使用map函數遍歷要在元素中呈現的對象數組

Question

我正在使用允許在幻燈片中呈現視圖的包。

我想通過創建一個包含文本和圖像源字符串的對象數組來檢查每個視圖。

我已經做了兩種方法：

創建一個這樣的。函數在render（）方法中，並在頁面元素內的「{this。function}」內調用它。

&

import React, { Component } from 'react' 
import { View, Text, StyleSheet, Image } from 'react-native' 
import { Pages } from 'react-native-pages' 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    }, 
}) 

export default class Walkthrough extends Component { 
    render() { 
    const pages = [{ 
     text: 'first slide', 
     imageSource: './images/hello.png', 
    }, 
    { 
     text: 'second slide', 
     imageSource: './images/hello.png', 
    }, 
    { 
     text: 'third slide', 
     imageSource: './images/hello.png', 
    }] 
    return (
     <Pages> 
     { pages.map(([value, index]) => { 
      return (
      <View key={index}> 
       <Image uri={value.imageSource} /> 
       <Text> {value.text} </Text> 
      </View> 
     ) 
     })} 
     </Pages> 
    ) 
    } 
} 

我不斷收到此錯誤：「無效試圖解構非迭代的情況下」與通天塔。

我通天相關的依賴性：

"devDependencies": { 
    "babel-eslint": "^8.0.1", 
    "babel-jest": "21.2.0", 
    "babel-plugin-transform-decorators-legacy": "^1.3.4", 
    "babel-plugin-transform-flow-strip-types": "^6.22.0", 
    "babel-preset-react-native": "4.0.0", 
}, 

Answer 1

你以錯誤的方式訪問地圖功能。

<Pages> 
{ 
    pages.map((page, index) => { 
     return (
      <View key={index}> 
       <Image uri={page.imageSource} /> 
       <Text> {page.text} </Text> 
      </View> 
     ) 
    }) 
} 
</Pages> 

爲array.map array.map的DOC（（值，指數）=> {}）;

Answer 2

你array.map的使用使錯誤，應該是array.map(function(arrayItem, index) {})，不[arrayItem, index]，

爲您的代碼：

return (
    <Pages> 
    { pages.map((value, index) => { 
     return (
     <View key={index}> 
      <Image uri={value.imageSource} /> 
      <Text> {value.text} </Text> 
     </View> 
    ) 
    })} 
    </Pages> 
)