React-Redux容器抛出Connect（ModalRoot）中的mapStateToProps（）必须返回一个普通对象。而是收到未定义。"

Question

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

我得到的错误是“Connect（ModalRoot）中的MapStateTops（）必须返回一个普通对象，而不是未定义的接收。”

// 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

问题的根本原因是state.modal未定义。您可以通过添加一个简单的日志语句来获取更多信息，例如：

export default connect(state => { console.log('state', state); return state.modal })(ModalRoot)

这可能有助于您查看什么处于状态，并有助于找出为什么state.modal未定义。

要消除此错误，可以使用以下两种解决方案之一：

确保对象不是未定义的：

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

使用ES6解构：

export default connect(({ modal }) => ({ modal }))(ModalRoot)

如果您使用ES6解构（本质上与@MichaelRasahaingo的解决方案相同），您的道具解构也将更改为：

const ModalRoot = ({ modal: { modalType, modalProps } }) => {

或者，您也可以使用此替代语法，并保持解构的原样：

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

Answer 2

也许mapStateToProps需要从减速器中选择一个特定的对象

你能试试这样的东西吗？

function mapStateToProps(state){
  const {modalType,modalProps} = state.modal;
  return {modalType,modalProps};
}

要么是这样，要么是您没有正确地将组合减速器传递到您的商店

Answer 3

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

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

看这里