我在将HomePage(App组件的子组件)组件连接到Redux存储时遇到问题。 在componentDidMount =>上,我尝试在文件底部调用connect,并将从动作创建者文件中导入的函数作为第二个参数传递,该函数可提取到后端以在React存储中设置数据。 但是,我收到一条错误消息,说已定义和导入的函数“不是函数”。 我似乎无法摆脱我的componentDidMount调用。 我也无法从此组件访问商店。

我尝试直接从组件中调度动作。 我在每个被调用的函数中都使用了调试器(尽管我没有通过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楼 票数:0

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

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

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

我建议完全不需要导出HomePage组件,以免发生此问题。 或命名它为HomePageBaseUnconnectedHomePage之类的名称,这样一眼就可以看出它不是正确的组件。

  ask by Kolton Starr translate from so

未解决问题?本站智能推荐:

1回复

如何将组件(文件)连接到Redux存储

我需要创建component/file/class然后将其连接到redux存储。 我不需要呈现此组件。 它只是一个帮助程序组件,可以包含从商店返回值的方法。 我试图用以下方法创建文件: 但这只是一个具有导出功能的文件,我无法(或不知道)如何将其连接到redux存储。 我所
1回复

是否可以将非组件类连接到redux存储?

所以我使用的是带有ApiClient助手的react-redux样板。 它看起来像这样: 我想将此连接到我的身份验证,以便我可以将标头添加到受保护的端点,如下所示: 但是,当我这样做时,我得到错误: Cannot read property 'store' of undefin
2回复

根路由组件未连接到Redux

我陷入一个似乎很明显的问题:路由器的根组件未订阅存储更改,即使调用了mapStateToProps,它也没有接收到道具。 我的路线被定义为普通对象: 然后在创建应用程序时导入此对象: 我的RootComponent看起来像这样: 单击按钮后,调度工作正常,因为在De
1回复

react-redux组件之间的存储映射问题

我正在开发我的第一个“大” react-redux应用程序。 我正在尝试在组件之间映射react-redux状态,但是似乎我错过了一些东西。 除了一件事情外,其他所有东西都像一个魅力:我的菜单具有反应路线导航功能正常,我的组件已呈现,按钮onClick事件还可以,我的剩余api被调用,并
1回复

Redux 连接组件不渲染

我是 redux 的新手,目前正在尝试让连接的组件进行渲染,但没有任何渲染。 Main.js 中的 header 标签应该呈现,但它没有。 我真的不明白问题是什么,没有任何语法错误或编译问题。 这是我的代码: 应用程序.js: 主要.js: 索引.js
3回复

每次使用反应路由器导航到 redux 组件时,如何阻止状态存储数据在 redux 组件中累积

好的,需要注意的是,我对 redux 非常陌生。 我正在做一个关于 atm 的课程,我试图跳出框框,使用 wordpress API 和 Redux 生成一个相当标准的网站。 我很欣赏 redux 通常用于更大的事情,但这似乎是学习过程中有用的第一步。 我有一系列组件,列出了从 wordpress
1回复

将动态链接传递到表时出现问题

我在这里使用react-bootstrap-table ,但其他每个选项都很好。 我在插入链接到表时遇到了很大的问题。 我几乎尝试了一切。 我有来自服务器的数据,因此我正在其上进行映射并呈现结果。 但是我需要能够单击其中一个并将该单击的值传递给第二个组件。 我可以不用使用react-b
2回复

react-router连接到redux:与链接一起工作,但只有在调度push时才更改URL

我正在尝试以编程方式推送URL以使用react-router,redux和connected-react-router进行导航 单击<Link />按钮时,它工作正常,URL正在变化,路径也在变化。 但是当使用dispatch(push(url)) ,URL只会更改,内容