将基于ES6钩子的应用程序转换为基于类的组件

Question

我是React的新手，我正在尝试将这段代码转换为基于类的组件。我知道我会朝相反的方向前进，但是我真的不知道该怎么做。错误是我所得到的。谢谢。

import React, { useState, useEffect } from 'react';

//Packages
import axios from 'axios';
import BootstrapTable from 'react-bootstrap-table-next';
import paginationFactory from 'react-bootstrap-table2-paginator';
import * as ReactBootStrap from 'react-bootstrap';

const DisplayTable = () => {
  const [players, setPlayers] = useState([]);
  const [loading, setLoading] = useState(false);


  const getPlayerData = async () => {
    try {
      const data = await axios.get(
        "https://nba-players.herokuapp.com/players-stats"
      );
      console.log(data);
      setPlayers(data.data);
    }
    catch(e) {
      console.log(e)
    }
  };


  const columns = [
    { dataField: "name", text:"name" },
    { dataField: "points_per_game", text:"points_per_game" },
    { dataField: "team_name", text:"team_name" },
  ]

  useEffect(()=> {
    getPlayerData();
  }, []);

  return(
  <div>
    <BootstrapTable
      keyField="name"
      data={players}
      columns={columns}
      pagination={paginationFactory()}
    />

  </div>
  )
};

export default DisplayTable;

Answer 1

这里，我已将您的代码转换为基于类的组件。

import React, { Component } from 'react';
// packages
import axios from 'axios';
import BootstrapTable from 'react-bootstrap-table-next';
import paginationFactory from 'react-bootstrap-table2-paginator';
import * as ReactBootStrap from 'react-bootstrap';

class DisplayTable extends Component {
  // class constructor
  constructor(props) {
    super(props);
    this.state = {
      players: [],
      loading: false,
    };
  }

  // async all data while component mount
  async componentDidMount() {
    try {
      const data = await axios.get(
        "https://nba-players.herokuapp.com/players-stats"
      );
      console.log(data);
      this.setState({ players: data.data });
    } catch (e) {
      console.log(e);
    }
  }

  // render starts from here
  render() {
    const { players } = this.state;

    const columns = [
      { dataField: "name", text: "name" },
      { dataField: "points_per_game", text: "points_per_game" },
      { dataField: "team_name", text: "team_name" },
    ];

    return (
      <div>
        <BootstrapTable
          keyField="name"
          data={players}
          columns={columns}
          pagination={paginationFactory()}
        />
      </div>
    );
  }
}

export default DisplayTable;