React-Native for loop 使用 FlatList 给出错误

Question

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

我喜欢先渲染 FoodType，然后在 FlatList 中渲染其各自的菜单。 数据保存在导航栏组件中。 我可以使用 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>

    ) 
  }

Answer 1

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

检查以下代码小吃： 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',
  },
});

Answer 2

您需要以这种方式更改您的render() function：

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>

    )
}

Answer 3

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

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

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

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

  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 的信息：

• https://flaviocopes.com/react-how-to-loop/
• https://reactnative.dev/docs/flatlist

Answer 4

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

  <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。 要垂直显示菜单，我必须使用 map。