Question

我正在尝试遍历我的React本机应用程序中的嵌套数组。

我尝试使用for循环，但是没有用。我还是React的新手，所以我对循环并不那么熟悉

现在我要做的是只显示newRow数组中每个对象中row的数据

使用{ item.newRow[0].name }确实有效，我想循环通过newRow来显示所有newRows

如何遍历所有行并显示所有newRows？

示例数组：

  {
    id: 0, 
    text: 'View',
    newRow: [
    {id: 0, text: 'View'},
    {id: 1, text: 'Text'},
    {id: 2, text: 'Image'},
    {id: 3, text: 'ScrollView'},
    {id: 4, text: 'ListView'},
    ]
  },
  {id: 1, text: 'Text',
    newRow: [
    {id: 0, text: 'View'},
    {id: 1, text: 'Text'},
    {id: 2, text: 'Image'},
    {id: 3, text: 'ScrollView'}, 
    {id: 4, text: 'ListView'},
    ]
  },
  {id: 2, text: 'Image'},
  {id: 3, text: 'ScrollView'},
  {id: 4, text: 'ListView'},

示例代码：

import React, { Component } from 'react';
import { FlatList, Text, StyleSheet,View } from 'react-native';

const rows = [
  {
    id: 0, 
    text: 'View',
    newRow: [
    {id: 0, text: 'View'},
    {id: 1, text: 'Text'},
    {id: 2, text: 'Image'},
    {id: 3, text: 'ScrollView'},
    {id: 4, text: 'ListView'},
    ]
  },
  {id: 1, text: 'Text',
    newRow: [
    {id: 0, text: 'View'},
    {id: 1, text: 'Text'},
    {id: 2, text: 'Image'},
    {id: 3, text: 'ScrollView'}, 
    {id: 4, text: 'ListView'},
    ]
  },
  {id: 2, text: 'Image'},
  {id: 3, text: 'ScrollView'},
  {id: 4, text: 'ListView'},

]

// const rowsNewRow = rows[i].newRow

const extractKey = ({newRow}) => newRow

export default class App extends Component {

  renderItem = ({item}) => {
    return (
      <Text style={styles.row}>
        {item.text}
      </Text>
    )
  }

  renderLoop = ({item}) => {
   var items= [];

    for(let i = 0; i < item; i++){

      items.push(
        <View key = {i}>
          <View>
           <Text style={styles.row}>
            {item.text}
          </Text>
          </View>
          <View>

          </View>
          <View>

          </View>
        </View>
      )
    }
  }

  render(

  ) {
    return (
      <View  style={styles.container}>

      <FlatList
        style={styles.container}
        data={rows}
        renderItem={this.renderItem}
        keyExtractor={extractKey}
      />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    marginTop: 20,
    flex: 1,
  },
  row: {
    padding: 15,
    marginBottom: 5,
    backgroundColor: 'skyblue',
  },
})

Example App

Answer 1

听起来您正在考虑将newRow数组中的项目包含在FlatList中创建的行中。

这可以通过将renderItem函数更新为类似的方式来实现

renderItem = ({item}) => {
  let items = [];
  if( item.newRow) {
    items = item.newRow.map(row => {
      return <Text>{row.text}</Text>
    })
  } 

  return (
    <View>
      <Text style={styles.row}>
        {item.text}
      </Text>
      {items}
    </View>
  )
}

我在做什么

创建一个空数组以保存映射的newRow个项目
检查newRow数组是否存在
如果存在，则将其映射到数组
更新return函数，使其返回所有项目

这是工作代码为https://snack.expo.io/@andypandy/flatlist-with-nested-array

的小吃

Answer 2

FlatList组件将遍历您的row数据集。您可以在renderItem中传递整个行对象，并返回一个以newRow作为数据集的组件。

<FlatList
   style={styles.container}
   data={rows}
   keyExtractor={extractKey}       
   renderItem={rowsProps=> {
     return <ListItem {...rowsProps} />;
   }}
 />

ListItem可以访问row的每个元素。 ListItem可以像

  const ListItem = (props) => {
       return 
          <View>
            {props.newRow.map(newProp => {
              return <View>newProp.text</View>;
            })}
          </View>

    }

Flatlist遍历React Native中的嵌套数组

2 个答案: