Question

我收到的错误是“ react-dom.development.js：55未捕获的不变违规：对象作为React子对象无效（找到：带有键{counter}的对象）。如果要渲染集合的儿童，请改用数组。”

将 Counter.js 从<p>{this.state.counter}</p>更改为<p>{this.props.counter}</p>

时会发生

据我了解，我正在使用mapStateToProps和mapDispatchToProps，并且我应该至少能够拉取计数器的initialState，即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>

在组件中，您正在渲染：

<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，以便它仅将数字本身作为化简器的state参数进行跟踪，而不是将该值嵌套在对象中。

React Redux：未捕获的不变违反（对象作为React子代无效）

1 个答案: