React Redux没有在表中显示数据

问题描述

我是react-redux的新手。我正在尝试通过api链接将俱乐部列表加载到表中，但未成功。有人可以帮我在桌子上显示俱乐部清单吗？

在actions / clubAction.js中

在api / ClubApi中，我使用axios.get（apiUrl +'clubs'）定义了getClubs

import * as types from "./actionTypes";
import * as clubApi from "../../api/clubApi";

export function loadClubSuccess(clubs) {
  return { type: types.LOAD_CLUBS_SUCCESS,clubs };
}

export function loadClubs() {
  return function (dispatch) {
    return clubApi
      .getClubs()
      .then(({clubs}) => {
        dispatch(loadClubSuccess(clubs));
      })
      .catch((error) => {
        throw error;
      });
  };
}

在reducers / clubReducer.js中

在reducer中，我添加了initialState.clubs，我在initialState文件中将其定义为clubs：[]

import * as types from "../actions/actionTypes";
import initialState from "./initialState";

export default function clubReducer(state = initialState.clubs,action) {
  switch (action.types) {
    case types.LOAD_CLUBS_SUCCESS:
      return action.clubs;
    default:
      return state;
  }
}

在ClubsPage.js中

import React,{Component} from "react";
import { connect } from "react-redux";
import * as clubActions from "../../../store/actions/clubActions";
import ClubList from "./ClubList";
import PropTypes from "prop-types";
import { bindActionCreators } from "redux";

class ClubsPage extends Component {

  componentDidMount() {
    const { clubs,actions } = this.props;

    if (clubs.length === 0) {
      actions.loadClubs().catch(error => {
        alert("Loading club Failed" + error);
      });
    }
  }

  render() {
    return (
      <>
      <h2>Klubovi</h2>
        <ClubList
            clubs={this.props.clubs}
        />
      </>
    );
  }
}

ClubsPage.propTypes = {
  clubs: PropTypes.array.isrequired,actions: PropTypes.object.isrequired,};

function mapStatetoProps(state) {
  return {
    clubs: state.clubs 
  };
}

function mapdispatchToProps(dispatch) {
  return {
    actions: {
      loadClubs: bindActionCreators(clubActions.loadClubs,dispatch)
    }
  }
}

export default connect(
  mapStatetoProps,mapdispatchToProps
)(ClubsPage);

在ClubList.js

import React from "react";
import PropTypes from "prop-types";
import BootstrapTable from 'react-bootstrap-table-next';

const columns = [
    {
        datafield: 'id',text: 'Id'
    },{
        datafield: 'name',text: 'Naziv kluba'
    },{
        datafield: 'email',text: 'E-Mail'
    }
]

const ClubList = ({ clubs }) => (
    <BootstrapTable 
        keyField='id' 
        data={ clubs } 
        columns={ columns } 
    />
);

ClubList.propTypes = {
  clubs: PropTypes.array.isrequired
};

export default ClubList;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）