Reactjs React-Redux:未捕获不变冲突（对象作为React子对象无效）

我收到的错误是react dom.development.js:55未捕获不变冲突：找到的对象作为react子对象无效：具有键{counter}的对象。如果要呈现子对象集合，请改用数组

当我将Counter.js从{this.state.Counter}

更改为{this.props.Counter}时会发生此错误

据我所知，我使用的是mapStateToProps和mapDispatchToProps，我应该至少能够提取计数器的初始状态，即0

我不确定这是否是问题的原因，但我使用console.log查看状态，但不确定这是否正确：

{counter: {…}}
  counter: {counter: 0}
  __proto__: Object

Counter.js

反减速器

actionTypes.js

---

您的州结构如下：

{ 柜台：{ 柜台:0 } } 它的结构是这样的，因为您的counterReducer定义了一个名为counter的嵌套字段，然后counterReducer被组合成一个更大的对象，因为它被传递给CombineReducer{counter:counterReducer}

在组件中，您正在渲染：

<p>{this.props.counter}</p>

另一个选项是将mapStateToProps更改为：

常量mapStateToProps=状态=>{ 返回{ 计数器：state.counter.counter， }; };

---

第三种选择是更改计数器减速器，使其只跟踪数字本身作为减速器的状态参数，而不是将该值嵌套在对象中。

我知道我的方向是正确的，但不确定。感谢您的帮助和澄清！

// Imports: Dependencies
import React, { Component } from 'react';

// Imports: Components
import Counter from './components/Counter';

// React Application
class App extends Component {
  render() {
    return (
      <div>
        <Counter />
      </div>
    );
  }
}

// Exports
export default App;

// Imports: Dependencies
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store/store';

// Imports: React Application
import App from './App';

// Render App
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('app'),
);

// Imports: Dependencies
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { createLogger } from 'redux-logger';

// Imports: Redux
import rootReducer from '../reducers/index';

// Redux: Thunk (Async/Await)
const middleware = [thunk];
if (process.env.NODE_ENV !== 'production') {
  middleware.push(createLogger());
}

// Redux: Store
const store = createStore(
  rootReducer,
  applyMiddleware(...middleware),
);

// Exports
export default store;

import { INCREASE_COUNTER, DECREASE_COUNTER } from '../actionTypes/actionTypes';

// Initial State
const initialState = {
  counter: 0,
};

// Redux: Counter Reducer
const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case INCREASE_COUNTER: {
      return {
        ...state,
        counter: state.counter + 1,
      };
    }
    case DECREASE_COUNTER: {
      return {
        ...state,
        counter: state.counter - 1,
      };
    }
    default: {
      return state;
    }
  }
};

// Exports
export default counterReducer;

export const INCREASE_COUNTER = 'INCREASE_COUNTER';

export const DECREASE_COUNTER = 'DECREASE_COUNTER';

<p>{this.props.counter}</p>

<p>{this.props.counter.counter}</p>