首页 > 解决方案 > 如何在 React Native 的 Flatlist 中传递数组以渲染

问题描述

我在 React Native 中渲染 Flatlist 时遇到问题。该数组是 Google 表格通过 Node express 的输出。数组示例是

[["Fateh","25"],["Fateh","100"],["Ambuja","140"],["Utcl","50"]]

到目前为止我已经尝试过:

setDoList(() => {
                return [
                  {col1 : responseText[0], col2:responseText[1] ,key: Math.random().toString()}
                ]
              })

但是缩进在这里不起作用。我什至尝试使用 { ... array} 将数组转换为 JS 对象,但没有帮助。我是JS领域的新手,请为我提供解决这个问题的方向。

标签: javascriptarraysreact-native

解决方案


为了在平面列表中使用数组数组,您可以执行以下操作

export default function App(){    

    const array = ['["Fateh","25"]','["Fateh","100"]','["Ambuja","140"]','["Utcl","50"]'];

      return(
        <View style={styles.div}>
          <FlatList
            data={array}
            renderItem={({ item,index }) => {
                console.log("item is",item);
                var array = JSON.parse(item);
        return(
            <View style={{flexDirection:"row"}}>
            {array.map((item, key) => 
            {
                return(
                <View>
                  <Text> {item} </Text>
                </View>
              )
            })}
            </View>
        )
        } }
            keyExtractor={item => item.id}
          />
        </View>
      );

    }

您可以为每个使用 FlatList,而不是在其中使用 map。

在此处输入图像描述

希望这可以帮助!


推荐阅读