为什么我不能使用过滤器删除我的待办事项？答案

【问题标题】：Why can't i delete my todo item using filter?为什么我不能使用过滤器删除我的待办事项？
【发布时间】：2022-01-02 05:45:56
【问题描述】：

我正在尝试创建删除我的待办事项的功能，但是当单击删除按钮时，没有任何反应，我的代码有什么问题，请帮助我！非常感谢！

import React, { useState } from "react";

function App() {
  const [value, setValue] = useState("");
  const [todos, setTodos] = useState([]);

  // you can use the submit itself, no need for an extra addTodo function
  handleSubmit = (e) => {
    console.log("x");
    e.preventDefault();
    setTodos([...todos, value]);
    setValue("");
  };

  deleteTodo = (id) => {
    console.log("delete")
    const removedArr = [...todos].filter(todo => todo.id !== id);

    setTodos(removedArr);
  }

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          onChange={(e) => setValue(e.target.value)}
          type="text"
          placeholder="add todo"
        />
        <button type="submit">Add</button>
      </form>
      {todos.map((todoValue) => (
        <div>
        {todoValue} <button deleteTodo={()=>deleteTodo(id)}>x</button>
        </div>

      ))}
      
  </div>
  );
}
export default App;

链接代码框：https://codesandbox.io/s/tender-cdn-cy3w4?file=/src/App.js:0-933

【问题讨论】：

stackoverflow.com/questions/70547151/…
什么是 id？是否有任何 id 对应于每个 todovalue？
你的待办事项只是字符串，它们没有任何 ID
您需要将id 添加到您的待办事项中，如下所示：codesandbox.io/s/dry-moon-5c3jc?file=/src/App.js

标签： reactjs filter

【解决方案1】：

你的代码有两个错误：

按钮应在用户单击该按钮时调用 deleteTodo 函数，即 onClick() 函数
id 未定义。请参考此沙盒代码示例。我更正了您的代码，现在它可以工作了。Link to sandbox

【讨论】：

【解决方案2】：

查看此代码

import React, { useState } from "react";

function App() {
  const [value, setValue] = useState("");
  const [todos, setTodos] = useState([]);

  // you can use the submit itself, no need for an extra addTodo function
  handleSubmit = (e) => {
    console.log("x");
    e.preventDefault();
    setTodos([...todos, value]);
    setValue("");
  };
  deleteTodo = (id) => {
    console.log("delete");
    console.log(id);
    const removedArr = [...todos].filter((todo) => todo !== id);

    setTodos(removedArr);
  };
  return (
    <div>
      <input
        onChange={(e) => setValue(e.target.value)}
        type="text"
        placeholder="add todo"
      />
      <button type="submit" onClick={handleSubmit}>
        Add
      </button>

      {todos.map((todoValue) => (
        <div>
          {todoValue} <button onClick={() => deleteTodo(todoValue)}>x</button>
        </div>
      ))}
    </div>
  );
}
export default App;

**工作演示**

【讨论】：

【解决方案3】：

您应该在按钮中使用onClick，并且您的列表没有 id，因此请使用 todo 而不是 todo.id：

      deleteTodo = (id) => {
     const removedArr = [...todos].filter(todo => todo !== id);
        setTodos(removedArr);
      }
    
      return (
        <div>
          <form onSubmit={handleSubmit}>
            <input
              onChange={(e) => setValue(e.target.value)}
              type="text"
              placeholder="add todo"
            />
            <button type="submit">Add</button>
          </form>
          {todos.map((todoValue) => (
            <div>
            {todoValue} <button onClick={()=>deleteTodo(todoValue)}>x</button>
            </div>
    
          ))}
        </div>
      );
    }
    export default App;

【讨论】：