react中使用forEach或map两种方式遍历数组
更新时间:2022年09月07日 16:11:08 作者:a little peanut
这篇文章主要介绍了react中使用forEach或map两种方式遍历数组,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
使用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( <div> {item.name} <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} <a>{item.address}</a> <hr/> </div> ) ) } } 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( <ListItem key={index} content={item} index={index} deleteItem={(index) => { this.deleteItem(index) }} /> ) }) { console.log('zzz') } return ( <div> <input type="text" value={this.state.inputValue} onChange={this.changeInput} /> <button onClick={this.commitInput}>提交</button> <ul> { console.log('mmm') } { elements } </ul> </div> ) } } 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 ( <div> <input type="text" value={this.state.inputValue} onChange={this.changeInput} /> <button onClick={this.commitInput}>提交</button> <ul> { this.state.list.map((item, index) => { return( <ListItem key={index} content={item} index={index} deleteItem={(index) => { this.deleteItem(index) }} /> ) }) } </ul> </div> ) } } export default TodoList
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
react 路由权限动态菜单方案配置react-router-auth-plus
这篇文章主要为大家介绍了react路由权限动态菜单方案react-router-auth-plus傻瓜式配置详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-08-08react中history(push,go,replace)切换路由方法的区别及说明
这篇文章主要介绍了react中history(push,go,replace)切换路由方法的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10react koa rematch 如何打造一套服务端渲染架子
这篇文章主要介绍了react koa rematch 如何打造一套服务端渲染架子,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-06-06
最新评论