使用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> 
)