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

目录使用forEach或map两种方式遍历数组forEachmap循环遍历数组时map和forEach的区别forEach情况map情况使用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}&nbsp;
          <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}&nbsp;
          <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 => {
    thihttp://www.cppcns.coms.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) }}
                />
              )
     php       })
          }
        </ul>
      </div>
    )
  }
}
export default TodoList

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