React遍历数组用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 = () => {
    // 改变this.setState的第一种方法：
    const newList = JSON.parse (JSON.stringify (this.state.list));
    newList.push (this.state.inputValue);
    this.setState ({
      list: newList,
      inputValue: '',
    });
    // 改变this.setState的第二种方法：
    // this.setState ({
    //   list: [...this.state.list, this.state.inputValue],
    //   inputValue: '',
    // });
  };
  deleteItem = index => {
    //   ******不要直接改state
    // 第一种方法
    this.state.list.splice (index, 1);
    this.setState ({
      list: this.state.list,
    });
    // 第二种方法
    // const list = [...this.state.list];
    // list.splice (index, 1);
    // this.setState ({
    //   list: 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