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 };

但是当我以SIMILAR方式订阅<Homepage />中的状态并访问render（）中的状态对象时，我得到了有效的状态对象。

为什么我是否同时为同一个状态对象在两个组件中获得两种不同的处理方式？

PS：如果你以某种方式得到一个问题的答案，请发布链接。我搜索了几个小时，但没有得到答案。我只想要一个解释

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访问状态返回函数而不是状态对象

1 个答案: