使用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 TodoListmap 情况
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以上为个人经验，希望能给大家一个参考，也希望大家多多支持Devmax。