React Typescript createContext类型问题

Question

我正在尝试使用React Context挂钩和typescript传递todos(初始状态(和addNewTodo(方法(。我尝试了多种解决方案，但没有成功，仍然会出错。

Partial泛型在上下文组件上没有给出问题，但在todo表单组件中调用addNewTodo时，它给了我错误Cannot invoke an object which is possibly 'undefined'。类似地，未定义的和空的对象｛｝也会给出不同的错误。不知道如何修复它。如果我通过any，那么IntelliSense将无法工作。

这是我的代码

TodoContext

import React, { useState, createContext, FC, useContext } from "react"
type Props = {
children: React.ReactNode,
}
interface TaskContextProps {
todos: Todo[],
addNewTodo: addNewTodo
}
const initialTodos: Array<Todo> = [
{ id: 1, text: 'buy some milk', completed: false },
{ id: 2, text: 'go to gym', completed: false }
]
export const TaskListContext = createContext<Partial<TaskContextProps>>({})
// export const TaskListContext = createContext<TaskContextProps>({})
// export const TaskListContext = createContext<TaskContextProps | undefined>(undefined)
const TaskListContextProvider: FC<Props> = ({ children }) => {
const [todos, setTodos] = useState(initialTodos)
const addNewTodo: addNewTodo = (newTodo) => {
setTodos([newTodo, ...todos])
}
return (
<TaskListContext.Provider value={{ todos, addNewTodo }}>
{children}
</TaskListContext.Provider>
)
}

Todo表单

import React, { useState, ChangeEvent, FormEvent, useContext } from 'react';
// import { useTaskList, TaskListContext } from '../context/TaskListContext';
import { TaskListContext } from '../context/TaskListContext';

const TodoForm = () => {
const [newTodo, setNewTodo] = useState('')
// const { addNewTodo } = useTaskList()
const { addNewTodo } = useContext(TaskListContext)
const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
setNewTodo(e.target.value)
}
const handleSubmit = (e: FormEvent<HTMLButtonElement>) => {
e.preventDefault()
const addTodo = { id: Math.random(), text: newTodo, completed: false }
if (newTodo.trim()) {
addNewTodo(addTodo)
}
else {
alert('Todo can't be empty')
}
setNewTodo('')
}
return (
<form>
<input placeholder='your todo...' value={newTodo} onChange={handleChange} />
<button onClick={handleSubmit}>Submit</button>
</form>
)
}

我们将感谢您的帮助。

Answer 1

为了防止TypeScript告诉对象的属性是未定义的，我们需要定义它们(使用Partial将每个属性设置为可能未定义，我们希望避免这种情况(。

这意味着在定义上下文时，我们需要为每个属性传递一些值：

export const TaskListContext = createContext<TaskContextProps>({
todos: [],
addNewTodo: () => {}
});

一旦初始化提供程序，就会替换此上下文初始值，因此它们永远不会从组件中读取。

这样，todos和addNewTodo将始终有一个值，并且TypeScript不会抱怨。