React useContext problem with Typescript -- 有什么替代方法<Partial>吗？

Question

我有一个使用useContext的React应用程序，我在正确输入上下文时遇到了问题。这是我的：

import React, { useState, createContext } from 'react';
import endpoints from '../components/endpoints/endpoints';
interface contextTypes {
endpointQuery: string,
setEndpointQuery: React.Dispatch<React.SetStateAction<string>>,
searchInput: string,
setSearchInput: React.Dispatch<React.SetStateAction<string>>,
filmSearch: string | undefined,
setFilmSearch: React.Dispatch<React.SetStateAction<string>>
pageIndex: number,
setPageIndex: React.Dispatch<React.SetStateAction<number>>,
resetState: () => void;
}
export const DisplayContext = createContext<Partial<contextTypes>>({});
interface Props {
children: React.ReactNode;
}
const DisplayContextProvider = (props: Props) => {
const { nowShowing } = endpoints;
const [ endpointQuery, setEndpointQuery ] = useState(nowShowing);
const [ searchInput, setSearchInput ] = useState('');
const [ filmSearch, setFilmSearch ] = useState('');
const [ pageIndex, setPageIndex ] = useState(1);
const resetState = () => {
setSearchInput('');
setFilmSearch('');
setPageIndex(1);
};
const values = {
endpointQuery,
setEndpointQuery,
pageIndex,
setPageIndex,
filmSearch,
setFilmSearch,
searchInput,
setSearchInput,
resetState
};

return (
<DisplayContext.Provider value={values}>
{props.children}
</DisplayContext.Provider>
);
};
export default DisplayContextProvider;

问题是，当我使用<Partial<contextTypes>>时，我的应用程序上到处都是这个错误：

Cannot invoke an object which is possibly 'undefined'

有没有办法解决这个问题，这样我就不必在出现未定义错误的地方到处添加!标记了？(我对Typescript也很陌生，所以我完全有可能用完全错误的方式键入上下文(

Answer 1

我认为问题在于，您无法使用有用的默认值初始化上下文，但您希望上下文提供程序在组件树中始终处于较高位置。

当我处于这种情况时，我想要以下行为：

• 如果组件试图使用consume上下文，但提供程序没有在其上使用，则抛出错误
• 使用上下文的组件应该假定上下文已经设置

所以，我通常会创建一个钩子来包装useContext并为我进行null检查。

import React, { useContext, createContext } from 'react';
interface contextTypes {
// ...
}
// private to this file
const DisplayContext = createContext<contextTypes | null>(null);
// Used by any component that needs the value, it returns a non-nullable contextTypes
export function useDisplay() {
const display = useContext(DisplayContext);
if (display == null) {
throw Error("useDisplay requires DisplayProvider to be used higher in the component tree");
}
return display;
}
// Used to set the value. The cast is so the caller cannot set it to null,
// because I don't expect them ever to do that.
export const DisplayProvider: React.Provider<contextTypes> = DisplayContext.Provider as any;

如果在组件树中没有DisplayProvider更高的组件中使用useDisplay，它将抛出，并且组件将不会装入。