4
votes

Erreur dans - Vérifiez la méthode de rendu de `Provider`. réagir-redux

entrez la description de l'image ici a >

class App extends Component{
render(){
return(
  <HashRouter>
    <Switch>
    <Route exact path="/login" name="Login Page" component={Login}/>
    <Route exact path="/register" name="Register Page" component= 
    {Register}/>
    <Route exact path="/404" name="Page 404" component={Page404}/>
    <Route exact path="/500" name="Page 500" component={Page500}/>
    <Route path="/" name="Home" component={Full}/>
    </Switch>
  </HashRouter>
  );
 }
 }

 export default App;

Code: ceci est mon fichier reducer.js

    reducer.js
    import * as actionTypes from './actions';

    const initialState = {
    assistants:[],
    fetchInProgress:true
    }

    const reducer = (state = initialState, action) =>{

    return state;
    };

    export default reducer;

Code: c'est mon fichier app.js app.js

index.js

    import { Provider } from "react-redux";
    import { createStore } from 'redux';

    import App from './app';

    import reducer from './store/reducer';

    const store = createStore(reducer);
    console.log("Store ..."+store);
    console.log(Provider);

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

Erreur: non intercepté Erreur: le type d'élément n'est pas valide: une chaîne attendue (pour les composants intégrés) ou une classe / fonction (pour les composants composites) mais obtenu : object.

Vérifiez la méthode de rendu de Provider.

veuillez vous référer aux deux images pour une erreur. J'obtiens une erreur car veuillez vérifier la méthode de rendu de votre composant fournisseur, mais ce n'est pas dans ma main de changer la méthode de rendu du fournisseur. parce que sa classe importée de redux donc, aidez-moi s'il vous plaît avec ce problème je suis confronté à ce problème des deux derniers jours pas en mesure de résoudre.

react-redux redux redux-saga redux-thunk react-router-redux

5 commentaires

Votre app.js exporte-t-il correctement le composant que vous essayez de rendre dans le Provider ?

Pouvez-vous nous montrer la classe App et le magasin?

Je cherche de l'aide pour le même problème (peut-être apprendre avec le même tutoriel par Max). Je n'ai pas de réducteurs combinés.

s'il vous plaît se référer à l'image pour l'erreur. J'ai imprimé les valeurs Store et Provider dans la console. i.stack.imgur.com/5AwvS.png

Je suppose que vous avez déjà mis à niveau la version de réaction. Vous devez également mettre à niveau react-dom et cela résoudra ce problème.

3 Réponses :

0
votes

Je pense que votre problème concerne le réducteur que vous passez. Avez-vous utilisé la fonction combineReducers pour combiner vos réducteurs?

import { createStore, combineReducers } from "redux";


const store = createStore(combineReducers({ 
    //...all your reducers 
}));

Exemple de sandbox de travail a>

Comparez avec votre code. Commencez peut-être par supprimer tous vos itinéraires. Le problème est peut-être là

3 commentaires

J'ai le même problème, pas de réducteurs combinés: importez * en tant qu'actions de '../actionNames'; const initialState = {personnes: []}; const reducer = (state = initialState, action) => {commutateur (action.type) {case actions.ADD_PERSON: console.log (actions.ADD_PERSON); état de retour; case actions.DELETE_PERSON: console.log (actions.DELETE_PERSON); état de retour; par défaut: état de retour; }; }; exporter le réducteur par défaut;

@ user2775366 Je n'ai pas encore de solution, si j'en avais une, je la partagerais dès que possible

J'ai mis à jour la question s'il vous plaît parcourir tout Aidez-moi avec les mêmes @varoons

6
votes

Il y a une incompatibilité avec le code précédent et les nouvelles versions de React ou Redux.
J'ai eu ce problème jusqu'à ce que j'aie rétrogradé mes outils installés, voir l'image ci-jointe des fichiers package.json comparés.
Je ne sais pas quel fichier est le coupable.
Avec la liste sur le côté droit de l'écran, cela fonctionne, avec l'autre, j'obtiens l'erreur, peu importe ce que je fais.
Les différences de version sont surlignées sur fond jaune.
Je suppose (non testé) que le problème provient de la différence de version entre les packages react et react-dom.

Une solution suggérée par Victor Nunes est de:

Supprimez le fichier package-lock.json et le dossier node_modules
Supprimez tout le contenu des "dépendances" sur package.json
Lancez npm install --save react react-dom react-redux react-scripts redux

Vous devrez peut-être installer d'autres packages en plus de ceux listés ci-dessus.

3 commentaires

la commande npm install que vous avez listée ci-dessus a résolu ce problème pour moi (n'a rien supprimé) .. il semble que certaines dépendances soient mal alignées dans mon cas! Je vous remercie!!! J'avais déjà essayé de tout réinstaller sauf react-dom et react-scripts, donc l'un d'entre eux était le coupable pour moi.

En outre, un lien vers où vous avez trouvé ces informations serait utile pour un certain contexte!

@Paul désolé, je ne peux pas créer de lien, les informations proviennent d'un cours React que je suis, et ce n'est pas gratuit.

0
votes

J'ai essayé d'importer thunk pour résoudre le problème du type de données et ce n'est pas une solution.

1 commentaires

Sa version fonctionne cependant, c'est donc quelque chose que nous avons manqué concernant la gestion du magasin, provenant probablement de l'État dans les données de contact qui doivent avoir été omises des conférences ou perdues dans les mises à jour linguistiques. C'est le débogage que je me concentrerais sur la recherche de redux store si vous voulez l'exercice, mais je vais utiliser le sien et apprendre le déploiement, puis me concentrer sur l'apprentissage de l'implémentation du langage des processus react / redux et travailler sur le débogage après.