您的代码有两个问题：
1.如果要保存每个任务的状态，不能使用单个布尔值。需要为每个任务保存一个值的数组或对象。
1.当您单击Done按钮时，两个onClick回调都会被触发（一个用于<button>，另一个用于<li>），将done的值设置为true，然后立即再次设置为false。
要求解[1]，可以将done变量设置为一个对象，其中每个键都是一个项目ID，匹配值是一个布尔值，用于确定任务是否完成。
要求解[2]，请从<li>中删除onClick。如果您在按钮的onClick中根据以前的状态设置任务状态，您仍然可以实现切换效果。
下面的代码应该是您所需要的：

// done is an object that maps task ids to booleans
  const [done, setDone] = useState({});

  return (
    <div className="tasks">
      {props.items.map(item => (
        <li key={item.id} style={{textDecorationLine: done[item.id] && 'line-through'}}>{item.text} 
          <div>
            <button onClick={() => setDone(prevState => ({...prevState, [item.id]: !prevState[item.id]}))} style={{color: "green"}}><DoneIcon/></button>
            <button style={{color: "red"}}><CloseIcon/></button>
          </div>
        </li>
      ))}
    </div>
  )

您需要保存item.id来确定单击了哪个项目，而不是保存布尔值。

import React, {useState} from 'react';
import "./Tasks.css";
import DoneIcon from '@mui/icons-material/Done';
import CloseIcon from '@mui/icons-material/Close';

function Tasks(props) {

  const [taskWasDone, setTaskWasDone] = useState(null);

  return (
    <div className="tasks">
        {props.items.map(item => (
          <li key={item.id} onClick={() => setTaskWasDone(null)} style={{textDecorationLine: taskWasDone === item.id && 'line-through'}}>{item.text} 
          <div>
            <button onClick={() => setTaskWasDone(item.id)} style={{color: "green"}}><DoneIcon/></button>
            <button style={{color: "red"}}><CloseIcon/></button>
          </div>
      </li>
        ))}

    </div>
  )
}

export default Tasks;