如何在函数中的本机响应中迭代数组，并在render()方法中使用它。必须返回有效的React元素(或null)。

Question

我是一个新的蜜蜂，以反应本土化，当我创建一个函数之外的渲染功能时，我无法使用地图渲染项目。

如果我提供正常的退货表，它可以工作：

function(props){
return <Text> Hello </Text>
}

但当我试图迭代时，它却没有。在下面的代码中，请告诉我函数函数Xyz(x)有什么问题。

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


class SectionListBasics extends Component {

constructor(props){
  super(props);


}

data = {
     "data": {
       "driver": {
         "name": "Sangesh",
         "phone": "07453520814"
       },
       "store": [
         {
           "host": "s-447.t2scdn.com",
           "name": "DEV - s-447.t2scdn.com",
           "license_key": "123",
           "driver_id": "56769"
         },
         {
           "host": "s-519.t2scdn.com",
           "name": "DEV - s-519.t2scdn.com",
           "license_key": "345",
           "driver_id": "56815"
         }        

       ]
     }
   }



  render() {
    return (
        <View>
        <Xyz c={this.data}/>       

      </View>


    );
  }
}




function Xyz(x) {

      return (x.c.data.store.map((index) => { <Text> {index.host} </Text> }))

}


export default connect(mapStateToProps, mapDispatchToProps)(SectionListBasics)

自定义Xyz无法工作。

它不断地抛出以下错误：

​

​

Answer 1

我犯了个愚蠢的错误

工作代码

function Xyz(x) {
  return (
    <View>
      {x.c.data.store.map((item) => (<Text> {item.name} </Text>))}
    </View>
  )
}

错误代码(语法错误)

function Xyz(x) {
  return (
    <View>
      {x.c.data.store.map((item) => { <Text> {item.name} </Text> })}
    </View>
  )
}

这段代码应该包装在()中，而不是{} {<Text> {item.name} </Text>} -to-->> (<Text> {item.name} </Text>)。

通过改变它是可行的。在这个{}它被视为jsx。同样重要的是，当返回时，它应该被包装在视图中

Answer 2

内部回报：

{
  someData.map((item) => (
    <Xyz
      key={itemId}
      custom={item.field}
    />
  ))
}

Answer 3

您的数据不是一个对象，因此不能执行x.c.data.store.map(...)。

首先尝试解析JSON，或者使用一个对象作为数据。