如何在对象create-react-app上使用spread运算符？

时间：2017-12-27 08:25:47

标签： reactjs redux

我是react-redux概念的新手，我尝试使用spread运算符。以下是我的代码：

这是我的商店（createStore.js）：

import { createStore } from 'redux';
import reducer from './reducers';

const store = createStore(reducer);

export default store;

使用redux使用redux combineReducers（目前只有一个reducer）：

import { combineReducers } from 'redux';
import roleCategory from './roleCategory';

//list of import reducers
export default combineReducers({
  roleCategory
});

我的roleCategory reducer是：

import { CHANGE_ROLE } from '../actions/actionTypes';

export default function reducer(state = 'teacher', action) {
  switch (action.type) {
    case CHANGE_ROLE:
      return {
        ...state,
        roleCategory : 'student'
      }
    default:
      return state;
  }
}

我有一个帮助我发送的功能：

import * as types from './actionTypes';

export function changeRole() {
  return {
    type: types.CHANGE_ROLE
  }
}

我发送的方式是：

store.dispatch(actions.changeRole());

我的终端没有给出任何错误，但是当我发送动作时，它会在控制台中给我一个白页和一些错误消息。

invariant.js:42 Uncaught Error: Objects are not valid as a React child (found: object with keys {0, 1, 2, 3, 4, 5, 6, 7, 8}). If you meant to render a collection of children, use an array instead.
in div (at OptionMenu.jsx:19)
in OptionMenu (created by Connect(OptionMenu))
in Connect(OptionMenu) (at Main.jsx:14)
in div (at Main.jsx:13)
in div (at Main.jsx:11)
in Main (at Root.jsx:13)
in div (at Root.jsx:11)
in Root (at index.js:12)
in Provider (at index.js:11)
at invariant (invariant.js:42)
at throwOnInvalidObjectType (react-dom.development.js:6748)
at updateSlot (react-dom.development.js:7092)
at reconcileChildrenArray (react-dom.development.js:7239)
at reconcileChildFibers (react-dom.development.js:7651)
at reconcileChildrenAtExpirationTime (react-dom.development.js:7764)
at reconcileChildren (react-dom.development.js:7747)
at updateHostComponent (react-dom.development.js:7998)
at beginWork (react-dom.development.js:8229)
at performUnitOfWork (react-dom.development.js:10224)
at workLoop (react-dom.development.js:10288)
at HTMLUnknownElement.callCallback (react-dom.development.js:542)
at Object.invokeGuardedCallbackDev (react-dom.development.js:581)
at invokeGuardedCallback (react-dom.development.js:438)
at renderRoot (react-dom.development.js:10366)
at performWorkOnRoot (react-dom.development.js:11014)
at performWork (react-dom.development.js:10967)
at batchedUpdates (react-dom.development.js:11086)
at batchedUpdates (react-dom.development.js:2330)
at dispatchEvent (react-dom.development.js:3421)
invariant @ invariant.js:42
throwOnInvalidObjectType @ react-dom.development.js:6748
updateSlot @ react-dom.development.js:7092
reconcileChildrenArray @ react-dom.development.js:7239
reconcileChildFibers @ react-dom.development.js:7651
reconcileChildrenAtExpirationTime @ react-dom.development.js:7764
reconcileChildren @ react-dom.development.js:7747
updateHostComponent @ react-dom.development.js:7998
beginWork @ react-dom.development.js:8229
performUnitOfWork @ react-dom.development.js:10224
workLoop @ react-dom.development.js:10288
callCallback @ react-dom.development.js:542
invokeGuardedCallbackDev @ react-dom.development.js:581
invokeGuardedCallback @ react-dom.development.js:438
renderRoot @ react-dom.development.js:10366
performWorkOnRoot @ react-dom.development.js:11014
performWork @ react-dom.development.js:10967
batchedUpdates @ react-dom.development.js:11086
batchedUpdates @ react-dom.development.js:2330
dispatchEvent @ react-dom.development.js:3421
index.js:2177 The above error occurred in the <div> component:
in div (at OptionMenu.jsx:19)
in OptionMenu (created by Connect(OptionMenu))
in Connect(OptionMenu) (at Main.jsx:14)
in div (at Main.jsx:13)
in div (at Main.jsx:11)
in Main (at Root.jsx:13)
in div (at Root.jsx:11)
in Root (at index.js:12)
in Provider (at index.js:11)

Consider adding an error boundary to your tree to customize error handling behavior.
__stack_frame_overlay_proxy_console__ @ index.js:2177
logCapturedError @ react-dom.development.js:9747
captureError @ react-dom.development.js:10540
renderRoot @ react-dom.development.js:10391
performWorkOnRoot @ react-dom.development.js:11014
performWork @ react-dom.development.js:10967
batchedUpdates @ react-dom.development.js:11086
batchedUpdates @ react-dom.development.js:2330
dispatchEvent @ react-dom.development.js:3421
invariant.js:42 Uncaught Error: Objects are not valid as a React child (found: object with keys {0, 1, 2, 3, 4, 5, 6, 7, 8}). If you meant to render a collection of children, use an array instead.
in div (at OptionMenu.jsx:19)
in OptionMenu (created by Connect(OptionMenu))
in Connect(OptionMenu) (at Main.jsx:14)
in div (at Main.jsx:13)
in div (at Main.jsx:11)
in Main (at Root.jsx:13)
in div (at Root.jsx:11)
in Root (at index.js:12)
in Provider (at index.js:11)
at invariant (invariant.js:42)
at throwOnInvalidObjectType (react-dom.development.js:6748)
at updateSlot (react-dom.development.js:7092)
at reconcileChildrenArray (react-dom.development.js:7239)
at reconcileChildFibers (react-dom.development.js:7651)
at reconcileChildrenAtExpirationTime (react-dom.development.js:7764)
at reconcileChildren (react-dom.development.js:7747)
at updateHostComponent (react-dom.development.js:7998)
at beginWork (react-dom.development.js:8229)
at performUnitOfWork (react-dom.development.js:10224)
at workLoop (react-dom.development.js:10288)
at HTMLUnknownElement.callCallback (react-dom.development.js:542)
at Object.invokeGuardedCallbackDev (react-dom.development.js:581)
at invokeGuardedCallback (react-dom.development.js:438)
at renderRoot (react-dom.development.js:10366)
at performWorkOnRoot (react-dom.development.js:11014)
at performWork (react-dom.development.js:10967)
at batchedUpdates (react-dom.development.js:11086)
at batchedUpdates (react-dom.development.js:2330)
at dispatchEvent (react-dom.development.js:3421)

我的选项菜单代码（抱歉有点乱）：

import React, { Component } from 'react';
import store from '../createStore';
import { connect } from 'react-redux';
import '../css/OptionMenu.css';
import * as actions from '../actions';

const mapStateToProps = state => ({
  roleCategory: state.roleCategory
});

function changeRoleTo(role) {
  store.dispatch(actions.changeRole(role));
}

function handleClick(e) {
  const target = e.target.innerText;
  if (target === 'teacher') {
    changeRoleTo('teacher');
  } else if (target === 'student') {
    changeRoleTo('student');
  }
}

class OptionMenu extends Component {
  render() {
      return (
        <div className="left-menu" onClick={handleClick}>
          {
            this.props.roleCategory === 'teacher' ? 
            <ul><li className="role">Teacher</li><li>Student</li></ul>:
            <ul><li>Teacher</li><li className="role">Student</li></ul>
          }
        </div>
      );
    }
}

export default connect(mapStateToProps, () => ({}) )(OptionMenu);

2 个答案:

答案 0 :(得分：0)

查看错误堆栈，我认为问题可能在您的容器组件中。

答案 1 :(得分：0)

很抱歉，看起来这个错误来自于角色类学生的状态。

让我解释一下我的错误（如果你已经熟悉redux，你可能认为这是一个愚蠢的错误）：

我使用了redux模块的combineReducers函数。 combineReducers将根据每个减速器分离状态（如果我错了，请纠正我）。因此，如果你有2个减速器，那么让我们说A和B.你的状态树将是一个包含的对象：

{
    A : <state-A>,
    B : <state-B>
}

并且这种状态不能互相干扰（从我观察者身上）。这就是为什么我得到错误，因为我把我的B状态变成了

{
    B : {
            B: <state-of-my-B>
        }  
}
当我返回新状态时，

上面的代码发生在我的roleCategory reducer中。

相关问题
最新问题