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

IT技术 reactjs filter
2022-08-01 01:24:43

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

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;

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

3个回答

您的代码中有两个错误：

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

遵循沙箱内编写的代码。

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
  const handleSubmit = (e) => {
    console.log("x");
    e.preventDefault();
    setTodos([...todos, value]);
    setValue("");
  };

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

    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, index) => (
        <div>
          {todoValue} <button onClick={() => deleteTodo(index)}>x</button>
        </div>
      ))}
    </div>
  );
}
export default App;

看到这个代码

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;

**工作演示**

代码沙盒

你应该在按钮中使用 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;
其它你可能感兴趣的问题
上一篇Metro 遇到错误：尝试解析module“firebase”时 下一篇Image Picker 在 React Native 应用程序中不起作用，为什么？