react中使用forEach或map两种方式遍历数组
作者: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
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。