您现在的位置是：网站首页> 编程资料编程资料

react中使用forEach或map两种方式遍历数组_React_

2023-05-24 371人已围观

简介 react中使用forEach或map两种方式遍历数组_React_

使用forEach或map两种方式遍历数组

之前写代码，从后台提取数据并渲染到前台，由于有多组数据，用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(  {item.name}  {item.address}
 ) }); return(  {elements} 
 ) } } 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)=> {item.name}  {item.address}
 ) ) } } export default forEach;

在这里插入图片描述

循环遍历数组时map和forEach的区别

1. map函数返回一个新的数组，在map的回调函数里，迭代每一项的时候也必须有返回值。

2. forEach 没有返回值

forEach情况

import React, { Component } from "react" import ListItem from './ListItem' class TodoList extends Component {     constructor(props) {         super(props);         this.state = {             inputValue: '',             list: ['bb', 'ccc']         };         this.changeInput = this.changeInput.bind(this);     }     changeInput(e) {         this.setState({             inputValue: e.target.value         })     }     commitInput = () => {         const newList = JSON.parse(JSON.stringify(this.state.list));         newList.push(this.state.inputValue);         this.setState({             list: newList,             inputValue: ''         })     }     deleteItem = index => {         this.state.list.splice(index, 1);         this.setState ({             list: this.state.list         })     }     componentDidMount() {         console.log('parent didmount')     }     render() {         console.log('parent render')         const elements = []          this.state.list.forEach((item, index) => {             elements.push(                  { this.deleteItem(index) }}                 />             )         })         {             console.log('zzz')         }         return (                                                                                     {                         console.log('mmm')                     }                     {                         elements                         }                 
                                               
         )     } } export default TodoList

map 情况

import React, { Component } from "react" import ListItem from './ListItem' class TodoList extends Component {     constructor(props) {         super(props);         this.state = {             inputValue: '',             list: ['bb', 'ccc']         };         this.changeInput = this.changeInput.bind(this);     }     changeInput(e) {         this.setState({             inputValue: e.target.value         })     }     commitInput = () => {         const newList = JSON.parse(JSON.stringify(this.state.list));         newList.push(this.state.inputValue);         this.setState({             list: newList,             inputValue: ''         })     }     deleteItem = index => {         this.state.list.splice(index, 1);         this.setState ({             list: this.state.list         })     }     componentDidMount() {         console.log('parent didmount')     }     render() {         console.log('parent render')         return (                                                                                     {                                                  this.state.list.map((item, index) => {                             return(                                  { this.deleteItem(index) }}                                 />                             )                         })                     }                 
             
         )     } } export default TodoList

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

您可能感兴趣的文章:

上一篇：React Native可复用 UI分离布局组件和状态组件技巧_React_

下一篇：Vue echarts画甘特图流程详细讲解_vue.js_