相关疑难解决方法(0)

为了更好地学习 React、TypeScript 和 Context / Hooks，我正在制作一个简单的 Todo 应用程序。但是，使上下文所需的代码感觉很麻烦。

例如，如果我想更改一个 Todo 的内容，我必须在三个地方（ITodo 接口、默认上下文值、默认状态值）更改它。如果我想传递一些新的东西，我必须在三个地方（TodoContext、TodoContext 的默认值和 value=）这样做。有没有更好的方法来不必编写这么多代码？

import React from 'react'

export interface ITodo {
    title: string,
    body?: string,
    id: number,
    completed: boolean
}

interface TodoContext {
    todos: ITodo[],
    setTodos: React.Dispatch<React.SetStateAction<ITodo[]>>
}

export const TodoContext = React.createContext<TodoContext>({
    todos: [{title: 'loading', body: 'loading', id: 0, completed: false}],
    setTodos: () => {}
})

export const TodoContextProvider: React.FC<{}> = (props) => {
    const [todos, setTodos] = React.useState<ITodo[]>([{title: 'loading', body: 'loading', id: 0, completed: false}])

    return ( …