mapStateToProps doit retourner un objet. Au lieu de cela reçu la Carte {}?

Bonjour je utiliser Immuteble Carte de l'état et quand j'essaie maspStateToProps j'ai cette erreur.

Uncaught Invariant Violation: mapStateToProps doit retourner un objet.
Au lieu de cela reçu la Carte {}.

Voici mon code:

Composant:

    const mapStateToProps = (state) => {
      return state
    }

     class LoanCalculator extends React.Component{

      componentWillMount(){
       this.dispatch(loadConstraints());
     }

      render(){
        return (
          <div>
            <h1> Loan Calculator </h1>
            <SlidersBox {...this.props}/>
         </div>
       )
     }
   }

    LoanCalculator = connect(
      mapStateToProps
    )(LoanCalculator)

   export default LoanCalculator

RÉDUCTEUR

    import { Map } from 'immutable'
    import {LOAD_CONSTRAINTS, SET_AMOUNT_VALUE, SET_TERM_VALUE} from "../actions/actions";

    const initialState = new Map();

    export default function calculator(state = initialState, action){
      switch (action.type){
        case LOAD_CONSTRAINTS:
          return  state.set("constraints", action.constraints)
         case SET_AMOUNT_VALUE:
           return state.set("selectedAmount", action.amount)
        case SET_TERM_VALUE:
         return state.set("selectedTerm", action.term)
        default:
          return state
      }
    }
  • Votre état semble être une carte à partir de immutable.js tandis que mapStateToProps est censé renvoyer un objet de votre message d'erreur dit. Essayez de renvoyer un objet, soit par la conversion de la carte ou d'extraire les valeurs dont vous avez besoin dans une structure d'objet.
  • Pourquoi ne pas simplement return {state}?
InformationsquelleAutor Grund | 2016-03-08
  1. 16

    Cette github question couvre exactement ce problème: https://github.com/reactjs/react-redux/issues/60.

    Vous pouvez extraire manuellement les valeurs que vous voulez à partir de votre Carte dans votre mapStateToProps fonction:

    const mapStateToProps = (state) => {
  return {
       constraints: state.get('constraints'),
       selectedAmount: state.get('selectedAmount'),
       selectedTerm: state.get('selectedTerm'),
  };
}
    • merci beaucoup c'est ce que j'ai besoin.
    • En aparté, cela vous force à garder à l'esprit exactement ce que vous êtes de passage vers le bas. À un certain point, il devient évident que vous devez diviser un composant en pleine croissance.
    InformationsquelleAutor Calvin Belden