时间戳

首页 > 解决方案 > 使用 FlatList 的 React-Native for 循环给出错误

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

问题描述

我是编程新手。我想动态呈现列表。父组件 Navbar 具有食品类型类别的状态，如墨西哥、中国。每个 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>

    ) 
  }

标签： javascriptjqueryreactjsreact-nativereact-redux

解决方案

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

  <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 。

推荐阅读