in React Accessing a state via this.props returns function instead of state object

问题

Scenario: I have two components, <Homepage> [self explanatory name] and <Country> [which shows a list of country accessed through an API].

<Homepage> imports <Country /> [Country is the child]

I dispatch an action to get list of country in . everything works fine, state gets updated as required. Also I'm using mapStateToProps and mapDispatchToProps. Below is the code for <Country />

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { userActions } from './../../_actions';

class Country extends Component {
constructor(props) {
 super(props);
 let packet = {};
 this.props.country(packet);
}

render() {
  const { country } = this.props;
  console.log("1 ", country)
  // when i access it here, instead of the state object i get a function
  //ƒ () {
  // return dispatch(actionCreator.apply(undefined, arguments));
  //}
  return(
   <div className="container">
   </div>
  )
}
}

function mapStateToProps(state) {
 const { country } = state; // country gets updated with latest value
  return {
     country
  };
}

const mapDispatchToProps = {
 country: userActions.country
}

const connectedCountryPage = connect(mapStateToProps, mapDispatchToProps)
(Country);
export { connectedCountryPage as Country };

AND if I change the code to this

class Country extends Component {
constructor(props) {
  super(props);
  let packet = {};
  const { dispatch } = this.props;
  dispatch(userActions.country(packet));
}
render() {
 const { country } = this.props;
 console.log("1 ", country);
 // I get the valid state object here
 return(
   <div className="container">
    </div>
 )
}
}

function mapStateToProps(state) {
 const { country } = state;
 return {
    country
 };
}

const connectedCountryPage = connect(mapStateToProps)(Country);
export { connectedCountryPage as Country };

BUT When in SIMILAR manner I subscribe to the state in <Homepage /> and access the state object in render(), I get the valid the state object.

WHY do I get two different treatments in the two components at the same time for same state object?

PS: If you somehow get a question with an answer to this, post the link. I have searched for hours and not able to get an answer. All I want is an explanation

PS: Do READ the comments in the code

回答1:

You're using the same name country for both the dispatch function as well as state. It's easily visible, just think about what this.props.country is right now ? It could be the function from mapDispatchToProps or the state variable from mapStateToProps.
I suggest you rename the dispatch function to something like getCountry:

// .....
// your component code
// .....
const mapStateToProps = (state) => ({
  country: state.country
});

// changed name
const mapDispatchToProps = {
 getCountry: userActions.country
};

const connectedCountryPage = connect(mapStateToProps, mapDispatchToProps)(Country);

As an aside, you may avoid the complex code you have in the last 2 lines by simply not using an extra variable:

export connect(mapStateToProps, mapDispatchToProps)(Country); // you may or may not add 'default'

来源：https://stackoverflow.com/questions/48679257/in-react-accessing-a-state-via-this-props-returns-function-instead-of-state-obje

标签

reactjs

redux

react-redux

redux-saga