反应终极版：未捕获不变冲突（对象是无效的反应子）(React Redux: Uncaught Inv

我收到的错误是“反应-dom.development.js：55未捕获不变违规：对象是不是一个阵营的孩子有效。（发现：物体键{}柜台）如果你的意思是使孩子们的集合，使用数组代替“。

当我改变Counter.js从它发生<p>{this.state.counter}</p>到<p>{this.props.counter}</p>

从我的理解，我使用的mapStateToProps和mapDispatchToProps，我应该能够拉计数器，这是0的至少初始化状态。

我不知道这是否是问题的原因，但我使用的console.log查看状态看起来像什么，但不知道这是正确的：

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

Counter.js

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

// Imports: Action Types
import { INCREASE_COUNTER, DECREASE_COUNTER } from '../actionTypes/index';

// Component: Counter
class Counter extends React.Component {
  constructor(props) {
    super(props);

  this.state = {
    counter: 0,
  };
}

render() {
  return (
    <div>
      <h2>React Redux Counter</h2>
      <button type="button" onClick={() => this.props.increaseCounter()}>Increase</button>
      <p>{this.props.counter}</p>
      <button type="button" onClick={() => this.props.decreaseCounter()}>Decrease</button>
    </div>
  );
 }
}

// Map State To Props (Reducers)
const mapStateToProps = (state) => {
  console.log('State:');
  console.log(state);
  console.log('');

  return {
    counter: state.counter,
  };
};

// Map Dispatch To Props (Actions)
const mapDispatchToProps = (dispatch) => {
  return {
    increaseCounter: () => dispatch({ type: INCREASE_COUNTER }),
    decreaseCounter: () => dispatch({ type: DECREASE_COUNTER }),
  };
};

// Exports
export default connect(mapStateToProps, mapDispatchToProps)(Counter);

App.js

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

index.js

// 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'),
);

store.js

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

counterReducer.js

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;

actionTypes.js

export const INCREASE_COUNTER = 'INCREASE_COUNTER';

export const DECREASE_COUNTER = 'DECREASE_COUNTER';

Answer 1:

你的状态的结构是这样的：

{
    counter: {
        counter : 0
    }
}

因为你它的这种方式构造counterReducer定义称为嵌套场counter ，以及counterReducer因为它传递给然后合并成一个更大的物体combineReducers({counter : counterReducer})

在你的组件，你渲染：

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

但是， props.counter将是一个对象，像{counter : 0}

反应不会让你只是扑通对象为渲染输出 - 它不知道该怎么办。

如果你只是想显示计数器的值，那么它必须是：

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

另一种办法是改变你的mapStateToProps是：

const mapStateToProps = (state) => {
  return {
    counter: state.counter.counter,
  };
};

第三个选择是改变counterReducer ，使其只跟踪自己的号码作为减速的state参数，而不是在一个对象的嵌套值。

文章来源: React Redux: Uncaught Invariant Violation (Objects are not valid as a React child)