Question

我有一个react.component-FetchData。它与减少动作者商店连接。在动作归约器存储中，它从api获取数据并在FetchData组件中呈现结果。

export class FetchData extends Component {
    constructor(props) {
        super(props);
        this.props.requestWeatherForecasts(0);
    }

  render() {
    return ...;
  }
}

export default connect(
  state => state.weatherForecasts,
  dispatch => bindActionCreators(actionCreators, dispatch)
)(FetchData);

如果我使用路线直接转到组件，则效果很好：

<Route path='/fetch-data/' component={FetchData}>

如果我将FetchData移到另一个组件（如Home），则会出现问题：

const Home = props => (<FetchData />)

所以我转到路线的首页：

<Route exact path='/' component={Home} />

并希望在Home组件中看到FetchData，但会收到错误消息，例如FetchData中根本没有连接的动作减少器商店

我的分步操作：

我创建了一个asp.net核心react.js + redux空应用程序。然后我将FetchData.js类更改为导出类。

export class FetchData extends Component

然后，我导入了FetchData并替换了Home.js中的主体。

import React from 'react';
import { connect } from 'react-redux';
import { FetchData } from './FetchData';

const Home = props => (
    <FetchData />
);

export default connect()(Home);

那一刻，reduce停止在FetchData.js中工作（或者至少看起来如此）

我试图使Home.js成为React.Component类。
我试图在FetchData.js中添加带有super（props）的构造函数。
我试图将默认连接从FetchData添加到Home。

Answer 1

您不正确地导入了组件

import React from 'react';
import { connect } from 'react-redux';
import FetchData from './FetchData';

const Home = props => (
    <FetchData />
);

export default connect()(Home);

删除FetchData周围的括号，该括号用于从文件中非默认导出。您的情况是./FetchData。由于您使用了export default，因此不需要括号。

如何在嵌套组件中使用减速器？

1 个答案: