将组件连接到 Redux 商店时出现问题

Question

我无法将我的 HomePage（App 组件的子组件）组件连接到 Redux 商店。 在 componentDidMount => 我尝试在我的文件底部调用 connect 并作为第二个参数传递 function 我从我的操作创建器文件中导入，该文件将获取到我的后端以在 React 存储中设置数据。 但是，我收到错误消息说定义和导入的 function “不是函数”。 我似乎无法通过我的 componentDidMount 调用。 我也无法从此组件访问商店。

我已经尝试直接从我的组件调度一个动作。 我在每个被调用的 function 中都使用了调试器（尽管我没有通过 ComponentDidMount。我还尝试使用 withRouter 将我的连接包装在里面。

*** Action Creator File ***

export const getSectors = ticker => {
  return dispatch => {
    fetch("http://localhost:3000/quote/sectors")
      .then(response => response.json())
      .then(data => dispatch({ type: "GET_SECTORS", data }));
  };
};
******************************************************************

*** HomePage Component File ***

import React from "react";
import styled from "styled-components";
import { connect } from "react-redux";
import { getSectors } from "../redux/actions";

export class HomePage extends React.Component {
  componentDidMount() {
    // debugger;
    this.props.getSectors("test");
  }

  render() {
    debugger;
    return (
      <HomePageWrapper>
        <div className="main">
          <div className="leftSide">
            <div> Mini Prof Card</div>
            <div>Leaderboard Card</div>
            <div>Trending news #</div>
          </div>
          <div className="feed"> two </div>
          <div className="rightSide"> three </div>
        </div>
        {/* <div className="footer">footer</div> */}
      </HomePageWrapper>
    );
  }
}

const mapStateToProps = state => {
  return { state };
};

export default connect(
  mapStateToProps,
  { getSectors }
)(HomePage);

*** Client Side Error Message

TypeError: this.props.getSectors is not a function

HomePage.componentDidMount
src/containers/HomePage.js:80
  77 | export class HomePage extends React.Component {
  78 |   componentDidMount() {
  79 |     // debugger;
> 80 |     this.props.getSectors("test");
  81 |   }
  82 | 
  83 |   render() {




23 stack frames were collapsed.
(anonymous function)
src/redux/actions.js:43
  40 |   })
  41 |     .then(r => r.json())
  42 |     .then(data => {
> 43 |       dispatch({ type: "UPDATE_USER", data });
     | ^  44 |     });
  45 | } else {
  46 |   return { error: "not found" };



I was expecting to hit my debugger in my action creator file but never got there.```

Answer 1

您正在导出原始组件和连接的组件。

您可能正在导入未连接的组件，例如import { HomePage } from "./this-file"但您要使用的是默认导出。

import HomePage from "./this-file"将导入默认导出，即用connect包装的组件。

如果不需要避免此问题，我建议根本不要导出HomePage组件。 或者将其命名为HomePageBase或UnconnectedHomePage ，以便一眼就能看出它不是正确的组件。