本文小编为大家详细介绍“react中怎么使用forEach或map两种方式遍历数组”,内容详细,步骤清晰,细节处理妥当,希望这篇“react中怎么使用forEach或map两种方式遍历数组”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。
之前写代码,从后台提取数据并渲染到前台,由于有多组数据,用map遍历会相对方便一点,但是
map不能遍历array数组,只能遍历object对象。
所以如果遇到这样的问题可以采用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;
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;
1. map函数返回一个新的数组,在map的回调函数里,迭代每一项的时候也必须有返回值。
2. 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
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中怎么使用forEach或map两种方式遍历数组”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注亿速云行业资讯频道。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。