无法在React JS Hook中读取道具

Question

我是React JS的新手，我在React Hooks中有一段代码ES6代码。我正在尝试访问从父级发送的props元素，但在这里无法阅读。我可以使用基于类的React App来阅读它，但不能使用Hooks实现。

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 () => {
    const data = this.props.jsondata  //This line of code!
  };


  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

  const getPlayerData = async () => {
    const data = this.props.csvdata  //This line of code!
  };

没有this，因为您正在使用功能组件。执行props.csvdata并将您的组件更改为：

const DisplayTable = (props) => {

Answer 2

您不必从this上下文中阅读功能组件的道具。

功能组件将props作为参数：

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


  const getPlayerData = async () => {
    const data = props.jsondata  //This line of code!
  };
  ...
}