javascript - React-Redux 容器抛出 "mapStateToProps() in Connect(ModalRoot) must return a plain object. Instead received undefined."

Question

我正在根据 Dan Abramov 对这个问题的解决方案构建一个基于 Redux 的模型/对话框触发器:Dan Abramov's solution

我收到的错误是“Connect(ModalRoot) 中的mapStateToProps() 必须返回一个普通对象。而不是收到 undefined object 。”

---

以下是模式容器的代码以及调用它的代码:

// Code that calls the Modal Container

import React from 'react';
import { Provider } from 'react-redux';
import { Connector as HorizonConnector } from 'horizon-react';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

import routes from '../routes';
import store from '../store';
import horizon from '../db';
import ModalRoot from './Modal';

export default () => (
  <MuiThemeProvider muiTheme={getMuiTheme()}>
    <HorizonConnector horizon={horizon} store={store}>
      <div className="app">
        {routes}
        <ModalRoot />
      </div>
    </HorizonConnector>
  </MuiThemeProvider>
);

---

 // The Modal Container
 import LoginModal from '../components/Modals/LoginModal'
 import {connect} from 'react-redux'

const MODAL_COMPONENTS = {
  'LOGIN_MODAL': LoginModal
  /* other modals */
}

const ModalRoot = ({ modalType, modalProps }) => {
  if (!modalType) {
    return <span /> // after React v15 you can return null here
  }

  const SpecificModal = MODAL_COMPONENTS[modalType]
  return <SpecificModal {...modalProps} />
}

export default connect(
  state => state.modal
)(ModalRoot)

---

这可能是一些简单的事情，我忘记了，但它让我发疯，欢迎任何评论或建议。

Answer 1

根据 redux 实现和示例，你应该这样写

export default connect(
  state => ({
    modal: state.modal
  })
)(ModalRoot)

参见here