javascript - 如何在 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领域的新手,请为我提供解决这个问题的方向。
解决方案
为了在平面列表中使用数组数组,您可以执行以下操作
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。
希望这可以帮助!
推荐阅读
- python - 在R中制作时间序列数据框
- mysql - 如何从 IntelliJ IDEA 2018 中的 mysql 转储中恢复 mysql 数据库?
- javascript - React Form 不更新状态 onChange
- django - 为什么我收到 NoReverseMatch 错误,我该如何解决?
- oracle - 存储过程在编译时抛出错误:Oracle sql developer
- javascript - Cube.js 后端的错误继续等待问题
- flutter - 颤振在手势检测器中添加文本
- r - 使用外部网络图像时如何减少 r markdown HTML 文件的大小?
- c++ - C/C++ 错误:定义函数之前的预期初始化程序
- python - 如何使用pandas PYTHON按列中的值合并两个CSV文件