当我按下目标任务时，我试图将todo标记为done，而当我按下done时，所有的todo都标记为done。我不知道为什么会发生这种行为，因为我将setDoneTast设置为true，所以css类将运行。

import { useState } from "react";
 import "./App.scss";

 function App() {
     //Value of Input
     const [val, setVal] = useState("");
     const [todos, setTodos] = useState([]);
     const [doneTask, setDoneTast] = useState(false);

     const addTodos = (e) => {
       if (val == "") return;
       e.preventDefault();
       setTodos([...todos, val]);
       setVal("");
      };

      const handleDelete = (id) => {
        setTodos(todos.filter((_, key) => key !== id));
      };

    ** const handleDoneTask = (id) => {
       setDoneTast(!doneTask);
     };**

    return (
         <div className="App">
         {/** On change values*/}
           <form onSubmit={addTodos}>
            <input
              onChange={(e) => setVal(e.target.value)}
              value={val}
              type="text"
            />
            <button type="submit">Add</button>
          </form>
          <ul>
             {todos.map((todo, key) => (
             <div className="arrange" key={key}>
                <li className={doneTask ? "doneTask" : null}>{todo}</li>
                **<a onClick={() => handleDoneTask(key)}>Done</a>**
                <a onClick={() => handleDelete(key)}>Cancel</a>
             </div>
                ))}
           </ul>
          </div>
         );
         }

      export default App;
 
   //CSS
    .doneTask {
       text-decoration: line-through!important;

       }