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

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

不要使用索引作为键。如果您要重新排序或删除（正在执行）一系列项目，则可能会遇到很多问题。这是一篇好文章：https://medium.com/@vraa/why-using-an-index-as-key-in-react-is-probably-a-bad-idea-7543de68b17c 可能是由于您要删除的键导致的错误，因为它是一个迭代器，所以当数组重新填充自身时，它会重新分配给另一个元素。将迭代器更改为每个元素的其他唯一标识符。
设置完后，您将立即调用removeItems方法。如果您在渲染返回中调用了方法（使用()），则会在每个渲染器上立即执行刷新。这就是为什么我要问您有什么要删除的原因，因为如果可以编写删除功能，则可能会在添加所有项目后立即删除它们。
最好的方法是使用数据集。您可以向每个元素添加这样的数据集：

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
    });
  };

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

3 个答案: