我正在为我正在学习的课程做一个教程。我正在做的实验是创建一个待办事项应用程序。我正在进行第三步，这一步要求我们创建一个删除任务的按钮。我觉得很可笑，因为我知道我可以解决这个问题，但是... a a.嗯，我还没有！我将发布代码，看看是否有任何初始问题。然后用我已经尝试过的方法更新。任何帮助都是非常感谢的。谢谢！

import React, { useState } from "react";
import "./App.css";

const App = () => {
  const [todos, setTodos] = useState([]);
  const [todo, setTodo] = useState("");

  const handleSubmit = (e) => {
      e.preventDefault();

      const newTodo = {
          id: new Date().getTime(),
          text: todo.trim(),
          completed: false,
      };

      if (newTodo.text.length > 0) {

          setTodos([...todos].concat(newTodo));
          setTodo("");

      } else {

          alert("Enter Valid Task");
          setTodo("");
      }
  }

  const deleteTodo = (id) => {
      let updatedTodos = [...todos].filter((todo) => todo.id !== id);
      setTodos(updatedTodos);
  }

  const button = <button onClick={() => deleteTodo(todo.id)}>Delete</button>

return (
    <div>
        <h1>To-do List</h1>
            <form onSubmit={handleSubmit}>
                <input
                    type="text"
                    onChange={(e) => setTodo(e.target.value)}
                    placeholder="Add a new task"
                    value={todo}
                />
                <button type="submit">Add Todo</button>
            </form>
            {todos.map((todo) => <div>ID: {todo.id} Task: {todo.text} {button}</div>)}
    </div>
    );
};

export default App;

我不只是复制和粘贴，所以有可能我在输入时搞砸了一些东西。我希望deleteTodo（）函数接受一个todo.id，并过滤待办事项列表，排除我想删除的。我想这个问题可能是由我创建按钮的方式引起的？同样，我不知道为什么我不能弄清楚。TIA。
编辑：好的，现在可以了！非常感谢你们所有人的解释。对于其他遇到这个问题的人，这里是我的失误之处：

const button = <button onClick={() => deleteTodo(todo.id)}Delete<button>

@Nicholas Tower的解释非常清楚--在.map(...)之外创建这个函数会导致deleteTodo获取todo state，而不是我希望它从todos数组中删除的not todo。@Lars Vonk、@0stone0和@Sudip Shrestha都说过这一点。@Sudip Shrestha和@pilchard还帮助更正了deleteTodo函数。同样，我真的很感谢所有的帮助。代码现在工作。我将显示更新，以便人们有类似的问题可以比较：

import React from "react";
import "./App.css";

const App = () => {
  const [todos, setTodos] = React.useState([]);
  const [todo, setTodo] = React.useState("");

  const handleSubmit = (e) => {
      e.preventDefault();

      const newTodo = {
          id: new Date().getTime(),
          text: todo.trim(),
          completed: false,
      };

      if (newTodo.text.length > 0) {

          setTodos(todos.concat(newTodo));
          setTodo("");

      } else {

        alert("Enter a valid task");
        setTodo("");
      }
  }

  // update the state using setState, rathar than mutating it directly @Sudip Shrestha
  const deleteTodo = id => {
      setTodos(prevState => {
          return prevState.filter(todo => todo.id !== id)
      });
  };

// line 51: button placed inside .map(), as per many suggestions below.
return (
    <>
        <h1>Todo List</h1>
            <form onSubmit={handleSubmit}>
                <input
                    type="text"
                    onChange={(e) => setTodo(e.target.value)}
                    placeholder="Add a new task..."
                    value={todo}
                />
            </form>
            {todos.map((todo) => 
                <div>
                    ID: {todo.id} Task: {todo.text}
                    <button onClick={() => deleteTodo(todo.id)}>Delete</button>
                </div>)}
    </>
    );
};

export default App;