react中使用forEach或map兩種方式遍歷數(shù)組

更新時(shí)間：2022年09月07日 16:11:08 作者：a little peanut

這篇文章主要介紹了react中使用forEach或map兩種方式遍歷數(shù)組，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

使用forEach或map兩種方式遍歷數(shù)組

之前寫代碼，從后臺(tái)提取數(shù)據(jù)并渲染到前臺(tái)，由于有多組數(shù)據(jù)，用map遍歷會(huì)相對(duì)方便一點(diǎn)，但是

map不能遍歷array數(shù)組，只能遍歷object對(duì)象。

所以如果遇到這樣的問(wèn)題可以采用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(){
    //定義一個(gè)數(shù)組，將數(shù)據(jù)存入數(shù)組
    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;

在這里插入圖片描述

循環(huán)遍歷數(shù)組時(shí)map和forEach的區(qū)別

1. map函數(shù)返回一個(gè)新的數(shù)組，在map的回調(diào)函數(shù)里，迭代每一項(xiàng)的時(shí)候也必須有返回值。

2. forEach 沒(méi)有返回值

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

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: