Question

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

我得到的错误是＆＃34; Connect（ModalRoot）中的mapStateToProps（）必须返回一个普通对象。取而代之的是未定义。＆＃34;

<小时/> 以下是模态容器的代码和调用它的代码：

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

Answer 2

也许mapStateToProps需要从你的reducer中选择一个特定的对象

你能尝试这样的事吗？

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

它或者你或者你没有正确地将combineReducers传递给你的商店

Answer 3

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

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

这可以帮助您了解state中的内容，并帮助您找出为什么 state.modal未定义。

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

确保对象未定义：

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

使用ES6解构：

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

如果您使用ES6解构（与@MichaelRasoahaingo的解决方案基本相同），您的道具解构也将变为：

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

或者你可以使用这种替代语法并按原样保持解构：

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

React-Redux容器抛出＆＃34; Connect（ModalRoot）中的mapStateToProps（）必须返回一个普通对象。取而代之的是未定义。＆＃34;

3 个答案: