Question

我在我的react应用程序中使用react-cookies和react-redux，并且试图编写它们，但是当我这样做时，会收到此错误：

您必须将组件传递给connect返回的函数。代替收到{}

下面是我的代码：

//index.js
ReactDOM.render(
  <CookiesProvider>
    <Provider store={store}>
      <ConnectedRouter history={history}>
        <App />
      </ConnectedRouter>
    </Provider>
  </CookiesProvider>,
  document.querySelector("#root") //Id root at index.html
);

//App.js
class App extends Component {
  componentDidMount() {
    this.props.fetchUser();
  }

  render() {
    return (
      <div>
        <BrowserRouter>
          <div className="container">
            <Route exact path="/" render={() => (<Login cookies={this.props.cookies}/>)} />
            <Route exact path="/surveys" render={() => (<Landing cookies={this.props.cookies}/>)} />
            <Route exact path="/login" component={Landing} />
            <Route exact path="/surveys/new" component={SurveyNew} />
          </div>
        </BrowserRouter>
      </div>
    );
  }
}

export default connect(
  null,
  actions
)(withCookies(App));

Answer 1

redux中的connect函数希望将react组件作为参数，但是withCookies可能返回不同的值。

因此，如下更改导出功能，然后尝试。

export default withCookies(connect(null, actions)(App));

如何在我的应用程序中编写redux connect和withCookies？

1 个答案: