redux ，無效的鉤子呼叫。鉤子只能在函數組件體內調用

Question

當我在 root.render 中設定並使用 Provider 時，它向我顯示此錯誤：

警告：無效的掛鉤呼叫。鉤子只能在內部調用 函數組件的主體。這可能發生在其中一個 原因如下：

1. 您的 React 和渲染器版本可能不符（例如 React DOM）
2. 您可能違反了 Hooks 規則
3. 您可能在同一應用程式中擁有多個 React 副本，並且未捕獲 TypeError：無法讀取 null 的屬性（讀取“useMemo”）

它只是針對 Provider 元件，如果我不呼叫它，就不會出現此錯誤。

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider>
    <App />
  </Provider>
);

reportWebVitals();

我卸載了 redux 和 npm 包，然後使用最新版本安裝它們，但我遇到了相同的問題。有人說可能是因為兩個包中有相同的名稱，這會讓電腦感到困惑，但我不這麼認為。

Answer 1

您需要將store傳遞給Provider

import React from 'react';
import ReactDOM from 'react-dom/client';

import App from './App';
import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux';
import store from "./path/to/store"

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

reportWebVitals();