React中数组元素移除问题：removeItem函数实现故障排查

我来帮你搞定这个删除项的问题！你遇到的核心问题是removeItem函数不知道要删除哪一项——因为你没有给它传递对应的标识（比如当前项的索引）。咱们一步步修改：

步骤1：给删除按钮传递当前项的索引 #

在渲染<li>的时候，把map循环里的索引y传递给removeItem函数。修改render里的按钮部分：

// 原来的代码
<button onClick={this.removeItem}>-</button>

// 修改后
<button onClick={() => this.removeItem(y)}>-</button>

这里用箭头函数包裹，是为了把当前项的索引y作为参数传递给removeItem，这样函数就明确知道要删除哪一项了。

步骤2：实现removeItem函数 #

现在removeItem可以接收索引参数，接下来要基于之前的状态生成新的列表数组（React要求状态更新必须是不可变的，不能直接修改原数组）。推荐用filter方法，它会返回一个不包含目标项的新数组：

removeItem(index) {
  this.setState(prevState => ({
    list: prevState.list.filter((_, i) => i !== index)
  }))
}

这里用prevState而不是直接用this.state，是因为setState是异步操作，prevState能保证拿到更新前的最新状态值，避免状态更新出错。

如果你更喜欢用slice拼接数组，也可以这样写：

removeItem(index) {
  this.setState(prevState => ({
    list: [...prevState.list.slice(0, index), ...prevState.list.slice(index + 1)]
  }))
}

这个方法是把索引前的部分和索引后的部分拼接起来，同样能得到移除目标项后的新数组。

完整修改后的代码 #

import React, { Component } from 'react';
import './Todo.css';
class Todo extends Component {
  constructor(props) {
    super(props);
    this.state = { list: [], text: '' }
    this.textChange = this.textChange.bind(this);
    this.addToList = this.addToList.bind(this);
    this.removeItem = this.removeItem.bind(this);
  }
  textChange(e) {
    this.setState({ text: e.target.value })
  }
  addToList() {
    this.setState(prevState => ({ list: prevState.list.concat(this.state.text), text: '' }))
  }
  removeItem(index) {
    this.setState(prevState => ({
      list: prevState.list.filter((_, i) => i !== index)
    }))
  }
  render() {
    return(
      <div>
        <h1>My Todo List</h1>
        <h3>Add item</h3>
        <input value={this.state.text} onChange={e => this.textChange(e)}/>
        <button onClick={this.addToList}>+</button>
        <ul>{this.state.list.map((x,y) => { 
          return <li key={y}>{x} <button onClick={() => this.removeItem(y)}>-</button> </li>
        })} </ul>
      </div>
    )
  }
}
export default Todo;

这样修改后，点击每个<li>里的删除按钮，就能同时移除DOM中的<li>元素和state里对应的列表项了。

内容的提问来源于stack exchange，提问作者Dave Wicomo