使用 FlatList 的 React-Native for 循环给出错误答案

【问题标题】：React-Native for loop using FlatList is giving error使用 FlatList 的 React-Native for 循环给出错误
【发布时间】：2020-07-21 10:15:18
【问题描述】：

我是编程新手。我想动态呈现列表。父组件 Navbar 具有食品类型类别的状态，如墨西哥、中国。每个 FoodType 都有各自的菜单

我喜欢先在 FlatList 中渲染 FoodType，然后再渲染其各自的 Menu。数据保存在导航栏组件中。我可以使用 FlatList 渲染 FoodType，但问题在于 for 循环逻辑。for 循环给了我错误。请看沙盒：

https://codesandbox.io/s/hungry-lamarr-p8mq3

相关代码如下（第 130-154 行），在菜单组件中

render() {
   
    return (
      <View className="container-fluid">
    
    <Text> Here use Flatlist</Text>
    
    
    for (let i = 0; i < this.props.Objs_Type.length; i++) {
    <FlatList 
    data={this.props.Objs_Type}
    renderItem={({item})=>
    <Text>{item.FoodType[i]}</Text>
    <Text>{item.Menu[i]}</Text>
   }
   keyExtractor={(item,index)=>item.id}
   /> 
  };
 
  
    </View>

    ) 
  }

【问题讨论】：

感谢大家提供宝贵的 cmets。我得到了我想要的。请看代码

标签： javascript jquery reactjs react-native react-redux

【解决方案1】：

使用嵌套的平面列表一个垂直和水平的平面列表来获取ui

检查下面的代码零食：https://snack.expo.io/@ashwith00/list

代码：

import * as React from 'react';
import { Text, View, StyleSheet, FlatList } from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import AssetExample from './components/AssetExample';

const data = [
  {
    title: 'Chinese',
    data: [1, 2, 3, 4],
  },
  {
    title: 'Mexican',
    data: [1, 2, 3, 4],
  },
  {
    title: 'Indian',
    data: [1, 2, 3, 4],
  },
  {
    title: 'Indian',
    data: [1, 2, 3, 4],
  },
];
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default function App() {
  const renderCategory = ({ item }) => (
    <View style={{ alignSelf: 'stretch', height: 200, marginBottom: 20 }}>
      <Text>{item.title}</Text>
      <FlatList
        keyExtractor={(_, i) => i.toString()}
        data={item.data}
        horizontal
        renderItem={renderBar}
        showsHorizontalScrollIndicator={false}
      />
    </View>
  );

  const renderBar = ({ item }) => (
    <View
      style={{
        height: '100%',
        width: 240,
        backgroundColor: 'red',
        marginRight: 10,
      }}
    />
  );
  return (
    <View style={styles.container}>
      <FlatList
        showsVerticalScrollIndicator={false}
        data={data}
        keyExtractor={(_, i) => i.toString()}
        renderItem={renderCategory}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

【讨论】：

谢谢。但是我需要先从 FoodType 渲染中文，然后是它的 Menu，然后是 Mexixan frm FoodType，然后是它的 Menu。所以我必须迭代每个项目

【解决方案2】：

你需要这样改变你的render()函数：

render() {

    return (
        <View className="container-fluid">

            <Text> Here use Flatlist</Text>

            <FlatList
                data={this.props.Objs_Type}
                renderItem={({ item }) => (
                    <View>
                        <Text>{item.FoodType}</Text>
                        <Text>{item.Menu}</Text>
                    </View>
                )}
                keyExtractor={(item, index) => item.id}
            />

        </View>

    )
}

【讨论】：

【解决方案3】：

我在您提供的沙盒链接中看到的错误是“意外令牌”。每当您收到此错误时，很可能是由于语法错误。在您的情况下，您的 for 循环周围缺少花括号。请记住，每当您将任何 JavaScript 代码嵌入到 JSX 块中时，请确保将 JavaScript 代码封装在大括号中。

return (
   <jsx-code>
     {
        some-js-logic like if-else, etc.
     }
   </jsx-code>
)

现在，在你的情况下，即使你添加了一对大括号，它也不起作用，因为 JSX 中的 for 循环不会那样工作。在我最后提供的第一个链接中了解更多信息。

为了解决您的问题，您根本不必使用 for 循环。 FlatList 组件在其 data 参数中接受数组。所以你不必遍历数组。您所要做的就是使用此数组的项目来呈现您自己的 UI。这是一个示例，它是您的代码 sn-p 的最简单表示。

  render() {
    return (
      <View className="container-fluid">
        <Text> Here use Flatlist </Text>
        {
          this.generateFlatList(this.props.Objs_Type)
        }
      </View>
    );
  }

  generateFlatList(objsTypes) {
    console.log(objsTypes);
    return (
      <FlatList
        data={objsTypes}
        renderItem={({item}) => <Text>{item.FoodType}</Text>}
        keyExtractor={(item) => item.id}
      />
    );
  }

这里有一些链接可以帮助您了解更多关于在 React JSX 和 FlatList 组件中使用 for-loop 的信息：

【讨论】：

感谢您的建议。但是我需要先从 FoodType 渲染中文，然后是其菜单，然后是墨西哥 frm FoodType，然后是其菜单。所以我必须迭代每个项目
@salabb 我认为SelectionList 组件应该足以满足您的要求。这是一个使用 SelectionList 的example。

【解决方案4】：

感谢大家提供宝贵的 cmets。帮助我学到了很多。如果有人感兴趣，下面是更正的代码

  <View className="container-fluid">
        <Text> Here use Flatlist</Text>

        <FlatList
          data={this.props.Objs_Type}
          renderItem={({ item }) => (
            <React.Fragment>
              <Text>{item.FoodType}</Text>
              {item.Menu.map(e => (
                <Text>{e}</Text>
              ))}
            </React.Fragment>
          )}
          keyExtractor={item => item.id}
        />
      </View>

renderItem 如果你放两个标签，比如两个文本，它会自动迭代它。所以就我而言，我在 Food_Type 中有两个项目，每个 Food_Type 中有 3 个菜单项。如果只对 Food_Type 和 Menu 分别使用两个 Text，它会先打印 Chinese，然后是 Chinese 的数组 ofMenu。要垂直显示菜单，我必须使用地图。

【讨论】：