web-dev-qa-db-fra.com

Vous devez passer un composant à la fonction retournée par connect. Au lieu de cela reçu non défini

Le code ci-dessous donne

Erreur non interceptée: vous devez transmettre un composant à la fonction renvoyée par connect. Au lieu de cela reçu non défini

List.js

import React from 'react';
import { connect, bindActionCreators } from 'react-redux';
import PostList from '../components/PostList'; // Component I wish to wrap with actions and state
import postList from '../Actions/PostList' //Action Creator defined by me

const mapStateToProps = (state, ownProps) => {
    return state.postsList
}

const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({"postsList":postList},dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(PostList);

PostList.js

import React from 'react'

export const PostList = (props) => {
    return <div>List</div>
}

Veuillez m'aider avec une solution?

javascriptreactjsreduxreact-redux
16
Ram Kumar Parthiban

Tu es en train de faire import PostList from '../components/PostList'; vous devez donc utiliser export default dans votre fichier PostList.js.

Sinon, vous devez faire import { PostList } from '../components/PostList';.

Pour quiconque est intéressé, voici un article de Nice sur la syntaxe d'import/export d'es6: http://www.2ality.com/2014/09/es6-modules-final.html

17
Canastro

Pas spécifiquement lié au demandeur, mais si vous êtes confronté à cette erreur, cela vaut la peine de vérifier si vous avez la bonne syntaxe connect ():

const PreloadConnect = connect(mapStateToProps, {})(Preload);

export default PreloadConnect;

Notez que Preload, est passé en tant que paramètre IIFE.

1
Lucas Bustamante

Plus de détails peuvent être trouvés ici .

Il peut y avoir trois raisons, qui se résument comme suit:

  • Dépendances circulaires entre les composants
  • Utilisation incorrecte de export et export default puis importé dans le mauvais sens
  • Utilisation incorrecte de la fonction de connexion, transmission des paramètres incorrects

Dans mon cas, il y avait les dépendances circulaires, et le circular-dependency-plugin m'a aidé à le corriger.

0
spp