用 Typescript 反应 useContext 问题——<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 context，但是provider没有在它上面使用，抛出一个错误
• 使用上下文的组件应假定上下文已设置。

所以，我通常会创建一个钩子来包装 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，它将抛出并且组件不会挂载。