Javascript 如何在函数中迭代react native中的数组，并在render（）方法中使用它。必须返回有效的React元素（或null）。

我是一个新的蜜蜂反应本机，我无法渲染项目使用地图时，我创建了一个功能以外的渲染功能

如果我提供正常回报，它的工作原理如下：

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)

import React，{Component}来自'React'；
从“react native”导入{AppRegistry、SectionList、样式表、文本、视图、按钮}；
从“react redux”导入{connect}
类SectionListBasics扩展组件{
建造师（道具）{
超级（道具）；
}
数据={
“数据”：{
“司机”：{
“姓名”：“桑格什”，
“电话”：“07453520814”
},
“商店”：[
{
“主机”：“s-447.t2scdn.com”，
“名称”：“DEV-s-447.t2scdn.com”，
“许可证密钥”：“123”，
“驱动程序id”：“56769”
},
{
“主机”：“s-519.t2scdn.com”，
“名称”：“DEV-s-519.t2scdn.com”，
“许可证密钥”：“345”，
“驱动程序id”：“56815”
}        
]
}
}
render（）{
返回(
);
}
}
函数Xyz（x）{
返回（x.c.data.store.map（（索引）=>{{index.host}））
}
导出默认连接（mapStateToProps、mapDispatchToProps）（SectionListBasics）

自定义Xyz不工作

它不断抛出以下错误：

内部返回：

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

{
someData.map（（项）=>(
))
}

内部退货：

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

{
someData.map（（项）=>(
))
}

您的数据不是对象，因此无法执行

x.c.data.store.map（…）

---

请先尝试解析JSON或使用对象作为数据。

您的数据不是对象，因此无法执行

x.c.data.store.map（…）

---

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

我犯了一个愚蠢的错误

工作代码

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

函数Xyz（x）{
返回(
{x.c.data.store.map（（项）=>（{item.name}））}
)
}

错误代码（语法错误）

函数Xyz（x）{
返回(
{x.c.data.store.map（（项）=>{{item.name}}
)
}

这段代码应该用（）而不是{}包装

{{item.name}

--到-->

（{item.name}）

---

通过改变它的工作。把这个{}放进去，它被当作jsx处理。同样重要的是，在返回时，它应该被包装在一个视图中

我犯了一个愚蠢的错误

工作代码

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

函数Xyz（x）{
返回(
{x.c.data.store.map（（项）=>（{item.name}））}
)
}

错误代码（语法错误）

函数Xyz（x）{
返回(
{x.c.data.store.map（（项）=>{{item.name}}
)
}

这段代码应该用（）而不是{}包装

{{item.name}

--到-->

（{item.name}）

---

通过改变它的工作。把这个{}放进去，它被当作jsx处理。同样重要的是，在返回时，它应该被包装在视图中

中

render（）

函数没有

return

关键字，因此它返回

未定义的
。返回
render（）
方法中的
Xyz
元素是否修复了该错误？很抱歉，我已更新了相关内容，但问题仍未解决。
Xyz
返回
map
的结果，这是一个数组。您需要将其包装到元素中，如下所示：
render（）
函数没有
return
关键字，因此它返回
undefined
。返回
render（）
方法中的
Xyz
元素是否修复了该错误？很抱歉，我已更新了相关内容，但问题仍未解决。
Xyz
返回
map
的结果，这是一个数组。你需要将它包装在一个元素中，如下所示：我已经检查了它的一个对象的类型。我已经检查了它的一个对象的类型。问题是你没有返回任何东西，没有
{}
，它会隐式返回，但这也会起作用
{return item.name}
问题是你没有返回任何东西，没有
{}
，它执行隐式返回，但这也会起作用
{return{item.name}}