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

Question

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

我收到的错误是“ Connect（ModalRoot）中的mapStateToProps（）必须返回普通对象。相反，接收到的是未定义的对象。”

---

这是模式容器的代码以及调用它的代码：

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

---

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

看这里

Answer 2

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

你可以尝试这样的事情吗？

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)