如何从React中的列表中删除单个项目

Question

我已经构建了一个简单的ToDo App 。 从表单输入中发送任务工作正常，但是单击“删除”按钮时我无法删除任务。

export class TodoList extends Component {
  constructor(props) {
    super(props)

    this.state = {
        task:'',
        items:[]
    }
  }
  onChangeHandler=(e)=>{
    this.setState({
        [e.target.name]: e.target.value
    })
  }
  addItem=(e)=>{
    e.preventDefault()
    if (this.state.task!==""){
    this.setState({
        items:[...this.state.items,this.state.task],
        task:''
    })
  }
  }
  removeItem=(index)=>{
    const remainingItems = this.state.items.filter(j => {
      return j !== index
    })
    this.setState({
      items: remainingItems
    })
  };

  render() {
    return (
      <div>
        <form>
            <input type='text' name="task"onChange={this.onChangeHandler} value={this.state.task} placeholder='Enter Task'/>
            <button type='submit' onClick={this.addItem}>Add Task</button>
        </form>
        <Lists items={this.state.items}
                delete={this.removeItem}/>
      </div>
    )
  }
}





export class Lists extends Component {

  removeItems=(index)=>{
    this.props.delete(index)
  }

  render() {
    return (
      <div>
        {this.props.items.map((item,index)=>
            <li className="Lists" key={index}>{item}
            <button type='button' onClick={this.removeItems(index)}>Remove</button>
            </li>)}
      </div>
    )
  }
}

Answer 1

您甚至碰巧要删除任何项目，还是列表为空？ 删除功能本身看起来不错，但是您在这里遇到了几个问题。

1. 不要使用索引作为键。 如果您要重新排序或删除（正在执行）一系列项目，则可能会遇到很多问题。 这是一篇好文章： https : //medium.com/@vraa/why-using-an-index-as-key-in-react-is-probably-a-bad-idea-7543de68b17c可能的错误是因为您要删除的键（由于它是迭代器）将在数组重新填充自身时重新分配给另一个元素。 将迭代器更改为每个元素的其他唯一标识符。

2. 设置后，您将立即调用removeItems方法。 如果您在render返回中调用了方法（with () ），则它将在每次刷新时立即执行。 这就是为什么我要问您有什么要删除的原因，因为如果可以编写删除功能，则可能会在添加所有项目后立即删除它们。

3. 最好的方法是使用数据集。 您可以向每个元素添加如下数据集：

data-item-id={some-id} ，您可以从触发事件const clickedId = event.currentTarget.dataset.someId其获取到方法内部，例如const clickedId = event.currentTarget.dataset.someId 。 请注意，元素中的数据集必须这样写，并且在将其提取到camelCase（likeThis）中时会自动重写。 然后，您可以使用此索引来定位数组中所需的元素并将其删除。

请注意，迭代器问题仍然适用，并且您需要其他唯一标识符。

让我知道您是否需要进一步的解释。

Answer 2

您可以使用拼接方法删除当前项目。

 removeItem = index=> {
    let newArray = this.state.items;
    newArray.splice(index, 1);
    this.setState({
      items: newArray
    });
  };

最好使用onClick删除这样的项目：

<button type='button' onClick={()=>this.removeItems(index)}>Remove</button>

希望这可以帮助。

Answer 3

我更喜欢传递我想删除的项目，索引可能因其变化而在欺骗。 通过唯一键查找索引，我使用item.id作为唯一键。

 removeItem = item => {
    const items = this.state.items;
    // if using lodash i use findIndex
    const index = _.findIndex(items, i => i.id === item.id)
    // if plain js
    const index = items.findIndex(i => i.id === item.id)
    items.splice(index, 1);
    this.setState({
      items
    });
  };