const filters: { [ key: string ]: Function } = { all: (todos: ITodo[]) => todos, active: (todos: ITodo[]) => todos.filter(todo => !todo.done), completed: (todos: ITodo[]) => todos.filter(todo => todo.done) }这段代码是什么意思

这段代码定义了一个名为 `filters` 的对象，该对象包含三个属性，分别为 `all`、`active` 和 `completed`。这些属性的值都是函数，这些函数接收一个 `todos` 参数，该参数是一个 `ITodo` 类型的数组。这三个函数分别根据 `todos` 数组中的元素的 `done` 属性的值来过滤出符合特定条件的元素，并返回筛选后的新数组。

- `filters.all` 函数返回 `todos` 数组的所有元素。
- `filters.active` 函数返回 `todos` 数组中，所有 `done` 属性为 `false` 的元素组成的数组。
- `filters.completed` 函数返回 `todos` 数组中，所有 `done` 属性为 `true` 的元素组成的数组。

相关问题

import './index.css' import dayjs from 'dayjs' import { useState } from 'react' import { finished } from 'stream' export interface ITodo { id: string content: string finished: boolean ctime: number mtime: number } export default function TodoList(props: { list: ITodo[] }) { function Delete(id: string) { const list = [...props.list] list.map((item) => { if (item.id === id) return '' }) } function onChange(id: string) { const list = [...props.list] list.map((item) => { if (item.id === id) item.finished = true else item.finished = false }) } return ( <div className="section"> {props.list.map((item) => { return ( <div key={item.id} className={ item.finished ? 'todo-item' : 'todo-item .todo-finished' }> <button onClick={() => onChange(item.id)} className="iconfont icon-checkbox"></button> <span className="todo-title">{item.content}</span> <b>{dayjs().format('MM月DD日 HH:mm:ss')}</b> <button onClick={() => Delete(item.id)} className="iconfont icon-delete"></button> </div> ) })} </div> ) }，这段代码如何实现删除和更改完成状态

要实现删除和更改完成状态，可以在函数组件中添加对应的处理函数。

删除可以使用数组的 filter 方法，删除指定 id 的 todo，然后更新组件状态。

更改完成状态可以通过遍历所有 todo，找到指定 id 的 todo，更改其 finished 属性为 true，其余 todo 的 finished 属性为 false，然后更新组件状态。

修改后的代码如下：

import './index.css';
import dayjs from 'dayjs';
import { useState } from 'react';

export interface ITodo {
  id: string;
  content: string;
  finished: boolean;
  ctime: number;
  mtime: number;
}

export default function TodoList(props: { list: ITodo[] }) {
  const [todos, setTodos] = useState(props.list);

  function deleteTodo(id: string) {
    const newTodos = todos.filter((todo) => todo.id !== id);
    setTodos(newTodos);
  }

  function toggleFinished(id: string) {
    const newTodos = todos.map((todo) => {
      if (todo.id === id) {
        return {
          ...todo,
          finished: true,
        };
      } else {
        return {
          ...todo,
          finished: false,
        };
      }
    });
    setTodos(newTodos);
  }

  return (
    <div className="section">
      {todos.map((item) => {
        return (
          <div
            key={item.id}
            className={item.finished ? 'todo-item' : 'todo-item .todo-finished'}
          >
            <button
              onClick={() => toggleFinished(item.id)}
              className="iconfont icon-checkbox"
            ></button>
            <span className="todo-title">{item.content}</span>
            <b>{dayjs(item.ctime).format('MM月DD日 HH:mm:ss')}</b>
            <button
              onClick={() => deleteTodo(item.id)}
              className="iconfont icon-delete"
            ></button>
          </div>
        );
      })}
    </div>
  );
}

其中，useState 函数返回的第一个元素是当前状态的值，第二个元素是更新状态的函数。调用更新状态的函数会重新渲染组件，并将新的状态值传递给组件。