React-Native 在 View标签中使用map()方法无法处理渲染二维数组的处理方法

最新推荐文章于 2024-09-03 07:22:13 发布

-FIGHTING-

最新推荐文章于 2024-09-03 07:22:13 发布

阅读量659

点赞数

分类专栏： RN-学习文章标签： react map

本文链接：https://blog.csdn.net/u012701023/article/details/117929916

版权

这篇博客探讨了在React Native开发中遇到二维数组渲染问题的解决方案。当使用常规的map方法遍历父级数组时，无法正确处理子数组。文章通过一个具体的例子展示了如何在不使用FlatList的情况下，通过定义额外的处理函数来正确渲染二维数组。作者提供了正确的代码实现，并解释了为何原始代码无法显示子数组数据的原因。

摘要由CSDN通过智能技术生成

在使用react-native进行项目开发过程中，遇到了二维数组的数据，需要在页面中渲染，但是使用普遍的数组遍历方法map()，只对父级数组进行了处理，没有处理二维数组。如果是在使用列表组件，比如FlatList时，不用担心该问题，在rendeRow(data)函数中可以使用map()进行处理，但是在普通标签，比如View中去渲染二维数组就会出现该问题。

// 自定义二维数组
const arr = [{
                aa: ['a1', 'a2', 'a3'],
                bb: 'bb1',
            },{
                aa: ['b1', 'b2', 'b3'],
                bb: 'bb2',
            }];
 
// 渲染处理该数组
 
render(
 
    return (
 
       <View>
           {
              arr.map((item, index) => {
 
                 return (
                      <View key={index}>
                            <Text>{item.bb}</Text>
                            {
                               item.aa.map((t,i) => {
                                      return (
                                         <Text>{t}</Text>