javascript - 如何在函数中的 React Native 中迭代数组并在 render() 方法中使用它。必须返回有效的 React 元素(或 null)。

Question

我是一只原生 react 的新蜜蜂，当我在渲染函数之外创建函数时，我无法使用 map 渲染项目。

如果我提供正常返回，它会起作用:

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

但是当我尝试迭代时却没有。请告诉我下面代码中的函数 function 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>} ---到--->> (<Text> {item.name} </Text>)

通过改变它就可以了。放入这个 {} 就被视为 jsx。同样重要的是，返回时应将其包装在 View