不能在 React Typescript 中使用 useContext

Question

我正在使用上下文 API 来逃避道具钻探，并且我创建了如下上下文：

const {
  Provider,
  Consumer,
} = React.createContext<Context>({
  carNames: [],
});

并提供如下上下文：

<Provider
      value={{
        carNames
      }}
    >
      {children}
    </Provider>

因此，为了使用上下文值，我想使用useContext()但是因为我从 createContext 中解构了 Consumer 和 Provider。 我应该将什么值传递给useContext(???)的参数。 试过这个useContext({Consumer, Provider})但没有结果😅。

Answer 1

不知道为什么你需要解构它。 这是一个工作示例：

应用程序.tsx

import { ContextProvider } from "../ContextProvider";

...

  const contextValue = {
    carValues,
    setCarValues,
  };

  return (
    <ContextProvider.Provider value={contextValue}>
      ...
    </ContextProvider.Provider>
  );
};

ContextProvider.tsx

export interface IContextProvider {
  carValues: ICarVlaues[];
  setCarValues: Dispatch<SetStateAction<ICarValues[]>>;
}

export const ContextProvider = createContext<IContextProvider>({
  carValues: [],
  setCarValues: () => {},
});

像这样使用它：

  const { carValues } = useContext(ContextProvider);