React Redux: Uncaught Invariant Violation（对象作为 React 子级无效）

Question

我收到的错误是“react-dom.development.js:55 Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {counter})。如果你打算渲染一个集合对于孩子，请改用数组。”

当我将 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}。

React 不会让你直接将一个对象放入渲染输出 - 它不知道如何处理它。

如果你只想显示计数器值，那么它需要是：

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

另一种选择是将您的 mapStateToProps 更改为：

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

第三种选择是更改counterReducer，使其仅将数字本身作为reducer 的state 参数进行跟踪，而不是将该值嵌套在对象中。