React使用笔记

import { useState } from 'react';
let nextId = 3;
const initialTodos = [
  { id: 0, title: 'Buy milk', done: true },
  { id: 1, title: 'Eat tacos', done: false },
  { id: 2, title: 'Brew tea', done: false },
];

export default function TaskApp() {
  const [todos, setTodos] = useState(
    initialTodos
  );

  function handleAddTodo(title) {
    // 增
    let list = [...todos,{id:nextId++,title:title,done: false}]
    setTodos(list)
  }

  function handleChangeTodo(nextTodo) {
    // 改
    const list = todos.map(item =>{
      if(item.id === nextTodo.id){
        return {id:item.id,title:nextTodo.title,done:nextTodo.done}
      } else {
        return item
      }
    })
    setTodos(list)
  }

  function handleDeleteTodo(todoId) {
    // 删
    setTodos(todos.filter(t =>
      t.id !== todoId
    ))
  }

  return (
    <>
      <AddTodo
        onAddTodo={handleAddTodo}
      />
      <TaskList
        todos={todos}
        onChangeTodo={handleChangeTodo}
        onDeleteTodo={handleDeleteTodo}
      />
    </>
  );
}