我正在尝试构建一个待办事项列表应用，我是打字脚本新手。当按下任务上的complete按钮时，我希望它被标记为已完成。当我按下按钮时，数据发生了变化，但屏幕上显示的内容没有变化。下面是代码中混乱的部分：

const completeTask = (id: number) => {

    let tasks = todos.map((task) =>  {
      if (task.id === id) {
        task.completed = true
        console.log(todos)
      }
    })

    setTodos(tasks)

  }

下面是完整的代码：

import React, { FC, useState } from 'react';
import {TodoItem} from './components/TodoItem';

interface ITask {
  id: number;
  todo: string;
  startDate: string;
  endDate?: string;
  completed: boolean;
}

const App: FC = () => {
  
  const [todos, setTodos] = useState<ITask[]>([
    {
    id: 0,
    todo: "Buy Bread",
    startDate: "12/12/2023",
    endDate: "12/14/2023",
    completed: false
  }, {
    id: 1,
    todo: "Buy House",
    startDate: "12/12/2023",
    endDate: "12/13/2023",
    completed: false
    }
  ])
  
  const completeTask = (id: number) => {

    let tasks = todos.map((task) =>  {
      if (task.id === id) {
        task.completed = true
        console.log(todos)
      }
    })

    setTodos(tasks)

  }

  return (
    <>
      {todos.map((task, key) => (
        <TodoItem id={key} todo={task.todo} completed={task.completed} completeItem={() => completeTask(key)} startDate={task.startDate} endDate={task.endDate === undefined ? "" : task.endDate} />
      ))}
    </>
  );
}

export default App;

下面是TodoItem的代码：

import React, { FC } from 'react';
// import arrow from '../public/arrow.svg';

export interface ITodoItemProps {
  id: number;
  todo: string;
  startDate: string;
  endDate?: string;
  completed: boolean;
  completeItem: (id: number) => void;
}

export const TodoItem: FC<ITodoItemProps> = ({id, todo, startDate, endDate, completeItem, completed}) => {
  return (
    <div className={`bg-white rounded-[10px] flex flex-col bg-white w-[300px] p-[18px] h-[270px] justify-between m-10 shadow-[2px_4px_20px_0px_rgba(0, 0, 0, 0.04)] ${completed === true ? 'border-[rgba(36, 46, 61, 0)] border-2' : ''}`}>
      <div>
        <div className='flex flex-row gap-3 mb-4 align-middle'>
          <img src="images/calendar.svg" className='w-[20px]' alt="" />
          <p className='pb-0 mb-0 font-mono text-[12px] align-middle text-third mt-1'>{startDate}</p>
          <img src="images/arrow.svg" alt="" />
          <p className='pb-0 mb-0 font-mono text-[12px] align-middle text-third mt-1'>{endDate}</p>
        </div>
        <p className='text-[17px] leading-[25px] max-h-[150px] overflow-y-auto'>{todo}</p>
      </div>
      <div className='w-full py-[8px] px-[12px] bg-second rounded-[10px] flex flex-row justify-between'>
        <img src="images/edit.svg" alt="" className='hover:cursor-pointer' />
        <div className='flex flex-row'>
          <button className='text-third px-[12px]'>Delete</button>
          <button onClick={() => completeItem(id)} className="bg-white px-[12px] py-[4px] rounded-[10px]" >Complete</button>
        </div>
      </div>
    </div>
  );
}

下面是错误：

TS2345: Argument of type 'void[]' is not assignable to parameter of type 'SetStateAction<ITask[]>'.
  Type 'void[]' is not assignable to type 'ITask[]'.
    Type 'void' is not assignable to type 'ITask'.
    37 |     })
    38 |
  > 39 |     setTodos(tasks)
       |              ^^^^^
    40 |
    41 |   }
    42 |