在 React 中通过 this.props returns 函数而不是状态对象访问状态

Question

场景：我有两个组成部分，<Homepage> [自解释名称] 和 <Country> [显示通过 API 访问的国家/地区列表]。

<Homepage>进口<Country />[国为子]

我发送一个动作来获取中的国家/地区列表。一切正常，状态会根据需要更新。我还使用 mapStateToProps 和 mapDispatchToProps。下面是 <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 如果我把代码改成这个

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 当我以类似的方式订阅 <Homepage /> 中的状态并访问 render() 中的状态对象时，我得到了有效的状态对象。

为什么对于同一个状态对象，我会同时在两个组件中得到两种不同的处理方式？

PS：如果您以某种方式得到问题和答案，post link。我已经搜索了几个小时，但无法得到答案。我要的只是一个解释

PS：请务必阅读代码中的注释

Answer 1

您对调度函数和状态使用了相同的名称 country。它很容易看到，想想现在 this.props.country 是什么？它可以是来自 mapDispatchToProps 的函数或来自 mapStateToProps.
的状态变量我建议你将调度函数重命名为 getCountry:

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

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

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

顺便说一句，您可以通过简单地不使用额外变量来避免最后两行中的复杂代码：

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

在 React 中通过 this.props returns 函数而不是状态对象访问状态

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

reactjs

redux

redux-saga

react-redux