React-Redux 容器在 Connect(ModalRoot) 中抛出“mapStateToProps() 必须返回一个普通对象。而是收到未定义的。”答案

【问题标题】：React-Redux container throws "mapStateToProps() in Connect(ModalRoot) must return a plain object. Instead received undefined."React-Redux 容器在 Connect(ModalRoot) 中抛出“mapStateToProps() 必须返回一个普通对象。而是收到未定义的。”
【发布时间】：2016-10-01 11:05:09
【问题描述】：

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

我得到的错误是“Connect(ModalRoot) 中的 mapStateToProps() 必须返回一个普通对象。而是收到未定义的。”

这是模态容器的代码和调用它的代码：

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

它可能很简单，我忘记了，但它让我发疯，欢迎任何 cmets 或建议。

【问题讨论】：

你检查过 state.modal 确实存在吗？使用 redux 开发工具？
感谢您的回复。实际上，它没有。不太确定我应该做什么来创建它。我错过了一步吗？
如果您再次查看 Dan 的回答，您将看到您需要创建一个 modalReducer，然后触发被减速器消耗的操作。如果你对 redux 不熟悉，可以试试 Dan 的课程：egghead.io/series/getting-started-with-redux
这是我的 actionCreators：link
这是我的减速器：link 与 combineRecucers 结合使用

标签： javascript reactjs modal-dialog redux react-redux

【解决方案1】：

根据redux的实现和例子你应该这样写

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

见here

【讨论】：

嗯，它只需要返回一个普通对象，这就是state.modal应该包含的......
参见const ModalRoot = ({ modalType, modalProps })，这可能是来自modal.modalType 和modal.modalProps 的道具的结果。
嗯，你有模态的默认状态吗？
使用 Michael 的方法会导致以下错误：Uncaught Invariant Violation: getNodeFromInstance: Invalid argument.invariant
@MichaelRasoahaingo ，默认状态是指传递给reducer的状态的默认参数吗？

【解决方案2】：

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

你能试试这样的吗？

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

要么是这个，要么你没有正确地将 combineReducers 传递给你的商店

【讨论】：

感谢@Kunkka 的回复，执行您建议的方法可以消除控制台中的错误，但渲染容器仍会导致崩溃/白屏
奇怪的是，没有！？
你安装了 chrome react 工具吗？我通常会检查提供程序是否已初始化
提供者已初始化@kunkka
我实际上认为问题在于状态更新，因为调度操作对状态没有影响，而且 state.modal 永远不会从减速器的初始状态生成。

【解决方案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 的解决方案基本相同），您的 prop 解构也将更改为：

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

或者您可以使用这种替代语法并保持解构不变：

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

【讨论】：