Question

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

我尝试直接从组件中调度动作。我在每个被调用的函数中都使用了调试器（尽管我没有通过ComponentDidMount调试它。我也尝试使用withRouter将连接包装在其中。

extension UIViewController {
    /// Loads a `UIViewController` of type `T` with storyboard. Assumes that the storyboards Storyboard ID has the same name as the storyboard and that the storyboard has been marked as Is Initial View Controller.
    /// - Parameter storyboardName: Name of the storyboard without .xib/nib suffix.
    static func loadStoryboard<T: UIViewController>(_ storyboardName: String) -> T? {
        let storyboard = UIStoryboard(name: storyboardName, bundle: nil)
        if let vc = storyboard.instantiateViewController(withIdentifier: storyboardName) as? T {
            vc.loadViewIfNeeded() // ensures vc.view is loaded before returning
            return vc
        }
        return nil
    }
}

*** 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);

Answer 1

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

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

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

如果不需要避免，我建议根本不要导出HomePage组件。或使用诸如HomePageBase或UnconnectedHomePage之类的名称，这样一眼就可以看出它不是正确的组件。

将组件连接到Redux存储时出现问题

1 个答案: