redux, ungültiger Hook-Aufruf. Hooks können nur innerhalb des Funktionskomponentenkörpers aufgerufen werden

Question

Wenn ich den Provider in root.render einrichte und verwende, wird mir dieser Fehler angezeigt:

Warnung: Ungültiger Hook-Aufruf. Hooks können nur intern aufgerufen werden Der Hauptteil der Funktionskomponente. Dies kann in einem der folgenden Fälle passieren Hier ist der Grund:

1. Ihre React- und Renderer-Versionen stimmen möglicherweise nicht überein (z. B. React DOM)
2. Möglicherweise verstoßen Sie gegen die Hooks-Regeln
3. Möglicherweise haben Sie mehrere Kopien von React in derselben App und TypeError wird nicht abgefangen: Die Eigenschaft von null kann nicht gelesen werden (lesen Sie „useMemo“).

Es gilt nur für die Komponente Provider, wenn ich sie nicht aufrufe, erhalte ich diesen Fehler nicht.

import React from 'react';
ReactDOM aus „react-dom/client“ importieren;
App aus './App' importieren;
importiere reportWebVitals aus './reportWebVitals';
import { Provider } from 'react-redux';

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

reportWebVitals();

Ich habe die Pakete redux und npm deinstalliert und mit der neuesten Version installiert, aber ich habe das gleiche Problem. Einige sagen, es könnte daran liegen, dass beide Pakete die gleichen Namen haben, was den Computer verwirrt, aber ich glaube nicht.

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();