native数组map() react_react-native map遍历渲染数组 - CSDN
  • Warning:Each child in an array or iterator should have a unique ...解决方法:在数组名.map等循环子项中添加key属性 array.map((value, index) => { return ( View key={value.toString()}>//循环子项加key

    Warning:Each child in an array or iterator should have a unique “key” prop.

    解决方法:在数组名.map等循环子项中添加key属性

    array.map((value, index) => {
        return (
            <View key={value.toString()}>//循环子项加key
            < DeviceView
                img={require('../resources/images/ic_storage.png')}
                header={this.sdName[index]}
                body={value}
            />
                <View style={styles.itemDividerView}>
                    <View style={styles.itemDivider}/>
                </View>
            </View>
        )
    })

    展开全文
  • map不能遍历array数组,只能遍历object对象。 所以如果遇到这样的问题可以采用forEach试一下 forEach import React,{Component} from 'react'; let list=[ { name:"百度", address:"http://www...

    之前写代码,从后台提取数据并渲染到前台,由于有多组数据,用map遍历会相对方便一点,但是
    map不能遍历array数组,只能遍历object对象。

    所以如果遇到这样的问题可以采用forEach试一下

    forEach

    import React,{Component} from 'react';
    let list=[
      {
        name:"百度",
        address:"http://www.baidu.com"
      },
      {
        name:"google",
        address:"http://www.google.cn"
      },
      {
        name:"firefox",
        address:"https://home.firefoxchina.cn"
      }
    ];
    class forEach extends Component{
      render(){
        //定义一个数组,将数据存入数组
        const elements=[];
        list.forEach((item)=>{
          elements.push(
            <div>
              {item.name}&nbsp;
              <a>{item.address}</a>
              <hr/>
            </div>
          )
        });
        return(
          <div>
            {elements}
          </div>
        )
      }
    }
    export default forEach;
    

    在这里插入图片描述

    map

    import React,{Component} from 'react';
    let list=[
      {
        name:"百度",
        address:"http://www.baidu.com"
      },
      {
        name:"google",
        address:"http://www.google.cn"
      },
      {
        name:"firefox",
        address:"https://home.firefoxchina.cn"
      }
    ];
    class forEach extends Component{
      render(){
        return(
        list.map((item)=>
            <div>
              {item.name}&nbsp;
              <a>{item.address}</a>
              <hr/>
            </div>
          )
        )
      }
    }
    export default forEach;
    

    在这里插入图片描述

    展开全文
  • 在使用react-native进行项目开发过程中,遇到了二维数组的数据,需要在页面中渲染,但是使用普遍的数组遍历方法map(),只对父级数组进行了处理,没有处理二维数组。如果是在使用列表组件,比如FlatList时,不用担心...

    在使用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>
                                          )
                                   })
                                }
                          </View>
                     )
                  })
               }
           </View>
        )
    )
    

    如果运行上述代码,打开页面,会发现,子数组部分的数据根本就不会显示。但是现在又不需要使用FlatList,因此,需要使用其他方法对该子数组进行处理。最终使用的解决方法是,使用额外定义的方法,处理该子数组,然后将处理结果返回到该嵌套层内。如下:

    // 处理子数组的函数
    
    arrFun(data) {
        return(
    
              data.map((t, i) => {
                  return(
                     <Text key={i}>{t}</Text>
                  )
              })
        )
    }


    整体代码如下:

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

    注:注意在使用map()时,在return中只能包含唯一的一个标签,该标签内还要添加key属性,不然在debug模式下会出现黄色警告。

    展开全文
  • "use strict"import React, { Component } from 'react';import { AppRegistry, // 注册组件,是应用的JS运行入口 StyleSheet, // 样式表, 类似于一个集合包含各个组件的属性 ScrollView, Dimensions, // 规格 Image,...
    "use strict"

    import React, { Component } from 'react';
    import {
    AppRegistry, // 注册组件,是应用的JS运行入口
    StyleSheet, // 样式表, 类似于一个集合包含各个组件的属性
    ScrollView,
    Dimensions, // 规格
    Image, // 图片组件
    View // 视图组件
    } from 'react-native';

    // 当前设备屏幕的size
    const { width, height } = Dimensions.get('window')

    // 图片
    var IMAGES = [
    require('./Resource/Test/1.png'),
    require('./Resource/Test/2.jpeg'),
    require('./Resource/Test/3.png'),
    require('./Resource/Test/1.png'),
    require('./Resource/Test/2.jpeg'),
    require('./Resource/Test/3.png'),
    require('./Resource/Test/1.png'),
    require('./Resource/Test/2.jpeg'),
    require('./Resource/Test/3.png')

    ];

    // 声明一个 Helloworld 组件
    class HelloWorld extends Component {


    /* 参考 :http://www.cnblogs.com/huanglifen/p/5175082.html
    * 请注意这个函数,返回的Image 必须要有 key
    * 如果 没有key,会报警告⚠️ ------ each child in an array or iterator should have a unique ”key”  props (具体看备注)
    * 在scrollview中使用map函数,循环创建。

    * */
    renderImages(key, i) {
            // key: 1、2、3、4、5......
    // i: 0、1、2、3、4......
    return <Image key={i} style={{flex: 1, width, height}} source={IMAGES[key]} resizeMode={'contain'}/>
        }

    render() { // 渲染

    return (

    /*
    * 设置空间高度:
    -1:直接对ScrollView设置高度
    -2:对该ScrollView的父控件设置相关高度<注意:是 父组件 需要添加style={{flex:1}]>
    -3:scrollview本身不能设置 flex: 1

    以下代码实现水平方向滑动,若改为垂直方向 flexDirection: 'column' + horizontal={false}
    * */
    <ScrollView contentContainerStyle={{flexDirection: 'row'}}
    showsHorizontalScrollIndicator={true}
    horizontal={true}
    pagingEnabled={true}
    >
    {IMAGES.map((key, i) => this.renderImages(key, i))}
    </ScrollView>
    );
    }
    }
    AppRegistry.registerComponent('HelloWorld', () => HelloWorld);


    备注:
    1.参考:http://www.cnblogs.com/huanglifen/p/5175082.html + http://www.zhihu.com/question/37701739
    2.设置 key 的说明 :在遍历或者循环输出去渲染子组件的时候,key必不可少

    **************************************** 效果图 ****************************************

    转载于:https://www.cnblogs.com/madaha/p/5932323.html

    展开全文
  • /**
 Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */"use strict"import React, {Component} from 'react'import { AppRegistry, View, Text, Picker, StyleS...
  •   最近做react项目时,遇到这样一个问题:遍历数据为23条,我想分别提取前20条,第21条,第22条,和第23条数据。可能是java和js学的不好,第一时间没想到怎么写。   后来知道可以用arr.slice(start,end)实现。 ...
  • React中,如果数组项item不为元素标签时,通常用arr.map(function (item,index) { return 组件或元素 })遍历数组并渲染。 当数组项为字符串时: var Demo1 = React.createClass({ render:function(){ var na...
  • react 的多维数组的遍历和其它框架方法是一样的只是写法不一样 import React from 'react' export default class key_arr extends React.Component{ constructor(){ super(); this.state = { multiple:[ ...
  • map方法的作用不难理解,“映射”嘛,也就是原数组被“映射”成对应新数组。下面这个例子是数值项求平方: var data = [1, 2, 3, 4]; var arrayOfSquares = data.map(function (item) { return item * item; }...
  • react map遍历(截取部分重要代码) {this.state.images.map((img, i) => { return ( <div className="swiperBox" key={"img" + i}> <p className="swiperP"> Updat...
  • 目录 1.Map 1.1介绍 1.2描述 2.Map相关操作-增删改查 3.Map排序 3.1以Value排序 ...4.Map和JSON转换 ...1.Map ...Map 对象保存键值对。...new Map([iterable])参数 ...Iterable 可以是一个数组或者其他...
  • map函数返回一个新的数组,在map的回调函数里,迭代每一项的时候也必须有返回值。 forEach 没有返回值 forEach情况 import React, { Component } from "react" import ListItem from './ListItem' class TodoList ...
  • React遍历标签数组

    2016-09-29 14:46:52
    1、问题背景 利用React遍历标签数组,并生成有序列表2、实现源码 React遍历标签数组 var strArray = [ 春季, 夏季, 秋季, 冬季 ]; ReactDOM.render( {...
  • react 在页面遍历数组

    2019-09-03 18:28:51
    html源码: //arr=["张三","李四","王五"] <ul> { arr.map(function(val){ return<li>{val}</li> }) </ul> ...
  • ReactNative小技巧集锦

    2019-01-15 09:57:59
    1.更新state中的对象数组 直接修改this.state.array[i].xxx是不生效的,需要把state中的对象深拷贝一份,然后通过this.setState()来更新。我们可以用lodash来优雅地完成这一步骤: import _ from 'lodash'; change...
  • 大家好,时隔几天,我又...上次写的关于ViewPaperAndroid这个控件的使用,大家反响很热烈,可以看出React Native现在已经越来越受到关注了,我最近学习的东西也是和RN有关,为了更好的管控RN中的state,这点以后再说,
  • react返回多个标签的正确做法是用高阶组件;或者用数组将其包裹起来;但是推荐使用高阶组件
  • 写在前面 在React Native 地图组件选择中我做了很多尝试,以下是我的一些建议和总结。...2.react-native-amap3d 国内优秀开源库基于高德地图SDK,无条件支持,但是在遇到复杂需求时就会比较鸡肋,...
  • react-native 基础语法

    2018-10-29 11:21:54
    1):字符串的使用(截取/替换字符串,...2):数组的使用(数组添加/删除/替换元素 合并数组)  点击此处 3) : json与map转换  点击此处 4):往json里面加入字段 var letcontain = [{name:"666",...
  • react-native-amap3d 是 react-native 高德地图组件,使用最新 3D SDK,支持 Android + iOS 参考github:https://github.com/qiuxiang/react-native-amap3d 功能 该组件提供的功能可以满足一般的react-native开发...
1 2 3 4 5 ... 20
收藏数 2,740
精华内容 1,096
关键字:

native数组map() react