Question

我在显示数据时遇到问题。

在我的应用程序中，我使用react和redux。

在控制台中，我将收到错误mapStateToProps() in Connect(ListPets) must return a plain object. Instead received undefined.

这是我的主要组成部分

import React, { Component } from 'react';
import { connect } from 'react-redux';
import loadData from '../actions/actions';

class ListPets extends Component {

  componentDidMount() {
    const { loadData } = this.props;
    loadData();
    console.log(loadData );
  }

  render() {
    const { dataPet } = this.props;
    return (
      <div>


      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return state;
};

const mapDispatchToProps = (dispatch) => {
  return {
    loadData: () => dispatch(loadData())
  }
};

此片段console.log(loadData );显示

ƒ loadData() {
      return dispatch(Object(_actions_actions__WEBPACK_IMPORTED_MODULE_7__["default"])());
    }

当我在div中添加代码{dataPet.data}时。我得到一个错误]。好像这些数据不在商店中，我不知道...

这是我的减速器功能

const initialState = {
  isFetching: false,
  dataPet: [],
};

const fetchDataReducer = (state=initialState, action) => {
  switch(action.types) {
    case actionTypes.FETCH_DATA_START:
      return {
        ...state,
        isFetching: true,
      }
    case actionTypes.FETCH_DATA_SUCCESS:
      return {
        ...state,
        isFetching: false,
        dataPet: action.dataPet,
      }
    case actionTypes.FETCH_DATA_FAIL:
      return {
        ...state,
        isFetching: false,
      }
  };
}

数据下载良好，因为控制台收到了FETCH_DATA_SUCCESS操作。

我不知道如何解决这个问题

Answer 1

我对您的代码进行了一些更改，请立即尝试...应该可以 https://codesandbox.io/s/z2volo1n6m

Answer 2

在减速器中，您有错字：

const fetchDataReducer = (state=initialState, action) => {
  switch(action.types) { // here

应为action.type而不是action.types。

Answer 3

如果thing是处于状态的对象：

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

然后使用：

this.props.thing在您的组件中

Connect（）中的mapStateToProps（）必须返回一个普通对象。而是收到未定义

3 个答案: