繁体   English   中英

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

Problem connecting component to Redux store

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我无法将我的 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.```
1 个回复

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

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

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

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

1 将多个容器组件连接到 redux 商店的问题

我在将容器组件连接到 redux 存储时遇到问题,我不确定连接应该发生在哪里,无论是在容器组件中还是在将分派操作的组件中。 目前,我的 index.js 看起来像这样 目前,我的商店工厂 function 看起来像这样 我的容器组件是 当我运行代码时,出现以下错误 从显示的错误中,我不确切知道错误是 ...

2 连接到SVN存储库时出现问题

好的。 只是寻找一些有关如何调试将一台计算机连接到SVN存储库的问题的建议。 详细信息如下:(1)我们的两台计算机成功连接到SVN存储库,但一台计算机没有成功。 (2)我们都使用Windows XP,并使用TortoiseSVN客户端。 (3)我们所有人都可以从自己的计算机进行连接, ...

3 连接到SQL Server时出现问题

我在vs 2010中写了一个应用程序,赢了7,32位sql server2008。sql server在我的本地机器上,我可以正常连接。 该应用程序的目标服务器和工作站是64位。 目标服务器是Windows Server 2012 R2 64位,并且我无法安装sql server 2008, ...

4 连接到elasticsearch时出现问题

我一直关注Storm Crawler的视频博客。 我正在尝试创建一个网络抓取工具,参考WIKI和视频https://www.youtube.com/watch?v=xMCuWpPh-4A&amp;feature=youtu.be ,但我得到: java.lang.IllegalSta ...

5 连接到RemoteWebDriver时出现问题

我正在研究在远程计算机上运行我们的Selenium Webdriver测试,但是连接有问题。 这是我在做什么: 从客户端计算机进行测试。 我这样设置驱动程序: 在带有要测试的浏览器的服务器上,我同时启动集线器和节点: 启动中心: 起始节点: 我检查了网格控 ...

2014-06-16 15:07:04 3 1860   selenium
7 连接到Java WS时出现问题

我创建了EJB Stateless Bean,并添加了@WebService和@WebMethod批注,以便能够将其作为Web服务进行访问。 我正在使用NetBeans和GlassFish。 当我使用服务器控制台测试Web服务时,它们按预期工作。 接下来,我创建了.net应用程序,该应用程 ...

8 连接到MSSQL DB时出现问题

我有一个Ubuntu 12.04服务器,我正在尝试建立与MSSQL数据库的连接。 我已经设法使用tsql和isql进行连接,但是osql无法正常工作并且使用PDO与PHP连接也无法正常工作..我会尝试尽可能多地提供信息,如果您需要更多信息,请告诉我我会编辑。 freetds.conf ...

10 连接到MySql时出现问题

我试图从我的ASP VB应用程序连接到MySql服务器。 我使用的连接字符串是: 我用来连接的代码是: 我收到错误“ 80004005” 代码有什么问题? 谢谢 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM