如何在反应中从列表中删除单个项目

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 方法。如果您在渲染的返回中调用了方法（使用()），它将在每次刷新时立即执行。这就是为什么我要问您是否有任何要删除的内容，因为如果删除功能可以编写，这可能会在添加所有项目后立即删除。

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

data-item-id={some-id} 并且您可以像 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
    });
  };