如何在 React 功能组件（待办事项列表）中从处于状态的数组中过滤出一个项目

Question

我试图让待办事项列表项在我单击它时消失。除我的 deleteHandler 方法外一切正常，我需要什么逻辑来过滤掉单击的项目？


import React, { useState } from 'react';

const ToDoList = () => { 
    const [list, setList] = useState([])
    const [item, setItem] = useState("")

    const submitHandler = (e) => {
        e.preventDefault();
        let newList = list.concat(item)
        setList(newList);
        console.log(item)
        e.target.reset();   
    }

    const deleteHandler = (index) => {
        console.log(list[index])
        // console.log(list)
        const newList = list.filter((item) => list.indexOf(item) !== item[index]) 
        console.log(newList)
        setList(newList)
               
    }

    return(
        <div>
             <h1>To Do List:</h1>
            <form onSubmit={submitHandler}>
                <input type='text' onChange={(e)=>setItem(e.target.value)}></input>
                <input type='submit' value='Add'></input>
            </form>
            {list.map((listItem, index) => (
                <div key={index} >
                    <p className="toDoItem" onClick={()=>deleteHandler(index)}>{listItem}</p>
                </div>
            ))}
        </div>
    )
}

export default ToDoList;

Answer 1

您可以通过过滤掉所有没有该索引的项目来解决此问题：

const newList = list.filter((i, itemIndex) => index !== itemIndex)

请注意，在更稳健的情况下，您可能希望为每个待办事项分配一个 ID。然后，您可以根据该想法进行过滤。但是，对于这种基本情况，根据索引进行过滤效果很好。

Answer 2

将您的 deleteHandler 更改为如下所示：

 const deleteHandler = (index) => {
        setList(list.filter((i,Id)=> Id !== index))      
    }

Answer 3

这是您应该尝试的逻辑

const deleteHandler = (index) => {
  // Assuming that the index means the index of an item which is to be deleted.
  const newList = list.filter((item) => list.indexOf(item) !== index);
  setList(newList);
}

如何在 React 功能组件（待办事项列表）中从处于状态的数组中过滤出一个项目

How to filter an item out of an array in state in React functional component (To Do List)

javascript

reactjs

react-functional-component