如何在 React js 上删除满足特定条件的列表元素答案

【问题标题】：How to deleted elements of a list who are meeting a certain condition on React js如何在 React js 上删除满足特定条件的列表元素
【发布时间】：2021-10-19 12:37:46
【问题描述】：

我想在按下按钮时从待办事项列表中删除所有已完成的项目。我怎么能那样做？我的useState 是这样的：

const [todos, setTodos] = useState([
    { id: 58477, text: "Wash dishes", done: false },
    { id: 64851, text: "Bake a cake", done: true },
    { id: 59858, text: "Make a website", done: true },
])

我的代码是这样的：

export default function TodoListItem(){
    const [ todos, setTodos ] = useTodosContext()


    function deleteTodo(todo) {
        console.log("Clear completed")
    }

    return(
        <div>
            {todos.map(todo => <li><input type="checkbox" className="roundCheckBox"/>{todo.text}</li>)}
            <button onClick={() => deleteTodo(todo)}>CLEAR COMPLETED</button>
        </div>
    )
}

【问题讨论】：

标签： reactjs onclick use-state

【解决方案1】：

您可以在 todos-state 数组上使用更高阶的数组方法（如 filter / forEach）来隔离已完成的 todos，然后将其从 state 中删除，更新状态会自动使 react 再次渲染 todoItems新状态的时间，即没有您想要的已完成项目

let todos = [
{
  done: true,
  name: "i need to be removed"
},
{
  done: true,
  name: "useless"
}, 
{
  done: false,
  name: "i need to be kept"
},
{
  done: false,
  name: "useful"
}];
let elements_to_delete = todos.filter(todo => todo.done);
let elements_to_keep = todos.filter(todo => !todo.done);
console.log("\n Items to keep are :-");
console.log(elements_to_keep);
console.log("\n Items to delete are :-");
console.log(elements_to_delete);

上面的sn-p显示了如何过滤done item然后你需要做的就是在deleteTodo函数中使用setTodos(elements_to_keep)，因为elements_to_keep也是一个可以替换之前数组的数组。

【讨论】：

【解决方案2】：

你可以试试这个：

// replace your function deleteTodo with this:
const deleteTodo = useCallback((d_todo) => {
  setTodos(todos => todos.filter(todo => d_todo.id !== todo.id))
}, [])

这会过滤掉正在删除的待办事项。

【讨论】：