React 18 / RTK 查询错误：找不到react-redux 上下文值。应用程序*已*已包装在提供商中

Question

出于某种原因，在将 React 更新到 v18 后，我开始收到上述错误。 React 18 不兼容 RTK 查询吗？我已经使用普通的 redux 切片对此进行了测试，它可以正常工作，但由于某种原因，当我尝试使用 RTK 查询时，我收到此错误。

任何尝试解决此问题的帮助将不胜感激，因为我不知所措。

index.tsx

import ReactDOM from "react-dom/client";
import App from "./App";
import { Provider } from "react-redux"; 
import { store } from "./store/store";
const container = document.getElementById("root") as HTMLElement;

const rootContainer = ReactDOM.createRoot(container);

rootContainer.render(
  <Provider store={store}>
    <App />
  </Provider>
);

store.tsx

import { configureStore, Store } from '@reduxjs/toolkit'
// Or from '@reduxjs/toolkit/query/react'
import { setupListeners } from '@reduxjs/toolkit/query'
import { pokemonApi } from './services/pokemon'

export const store: Store = configureStore({
  reducer: {
    // Add the generated reducer as a specific top-level slice
    [pokemonApi.reducerPath]: pokemonApi.reducer,
  },
  // Adding the api middleware enables caching, invalidation, polling,
  // and other useful features of `rtk-query`.
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(pokemonApi.middleware),
})

// optional, but required for refetchOnFocus/refetchOnReconnect behaviors
// see `setupListeners` docs - takes an optional callback as the 2nd arg for customization
setupListeners(store.dispatch)

应用程序.tsx

import { DefaultLayout } from "@components/layout/DefaultLayout";
import { Route, Routes, BrowserRouter } from "react-router-dom";
import HomePage from "@components/home/HomePage";
import SignUpPage from "@components/authentication/SignUpPage";
import LoginPage from "@components/authentication/LoginPage";
import BooksPage from "@components/books/BooksPage";
import { AppContextsProvider } from "@contexts/AppContexts";

const App = () => {
  return (
    <BrowserRouter>
      <AppContextsProvider>
        <DefaultLayout>
          <Routes>
            <Route path="/" element={<HomePage />} />
            <Route path="/login" element={<LoginPage />}></Route>
            <Route path="/signup" element={<SignUpPage />}></Route>
            <Route path="/books" element={<BooksPage />}></Route> 
          </Routes>
        </DefaultLayout>
      </AppContextsProvider>
    </BrowserRouter>
  );
};

export default App;

BooksPage.tsx

import { useGetPokemonByNameQuery } from "@store/services/pokemon";

const BooksPage = () => {
  const { data, error, isLoading } = useGetPokemonByNameQuery("bulbasaur");
  console.log("data", data);
  return (
    <div>
      <div>BooksPage</div>
    </div>
  );
};

export default BooksPage;

package.json

"dependencies": {
     ...
    "@redux-devtools/extension": "^3.2.2",
    "@reduxjs/toolkit": "^1.8.2",
    "@types/react": "^18.0.14",
    "@types/react-dom": "^18.0.5",
    "react": "^18.2.0",=
    "react-dom": "^18.2.0",
    "react-redux": "^8.0.2",
    "react-router-dom": "^6.2.2",
    ...
  },

Answer 1

我不是 100% 确定，但实际上问题似乎与包含

<AppContextsProvider>

styled-components

组件的

ThemeProvider

组件有关。该组件相当抛出与以下相关的错误：

https://github.com/DefinitelyTyped/DefinitelyTyped/issues/59765

我按照该线程中的解决方案并将以下内容添加到 package.json：

"resolutions": {
    ...
    "@types/react": "17.0.43",
    "@types/react-dom": "17.0.43"
  },

运行yarn install并重新启动所有内容后，页面渲染没有任何错误，RTK 查询挂钩按预期运行。