ReactTable 数据未呈现

Question

我是 React 和 ReactTables 的新手。我似乎无法让我的数据呈现在我的表格中。表本身呈现并具有给定我的数据集的正确行数（在 JSON 中添加更多行会在表中添加更多行），但实际上没有任何内容填充在标题或单元格本身中。我还通过将 sample_roster.players 打印到控制台来验证 JSON 似乎可以正确解析。我没有将自定义 CSS 应用于此表。导入的 react-table.css 中的所有内容都是默认的。

这里是 sample_roster.json：

{
  "players":
          [
            {"name": "Bill Freehan", "team": "Detroit Tigers", "points": "51"},
            {"name": "Bobby France", "team": "Montreal Oilers", "points": "13"},
            {"name": "Dwayne Johnson", "team": "Wrestlemania", "points": "25"},
            {"name": "Mario Lemeaux", "team": "Hockey Guy", "points": "89"},
            {"name": "Dancing Queen", "team": "ABBA", "points": "53"},
            {"name": "Eric The Red", "team": "Unicorns", "points": "43"},
            {"name": "Yasmeen Bleeth", "team": "Baywatch", "points": "151"},
            {"name": "Bill Lambeer", "team": "Detroit Pistons", "points": "8"},
            {"name": "Bill Pullman", "team": "Independence Day", "points": "111"},
            {"name": "Tony The Tiger", "team": "Detroit Tigers", "points": "41"},
            {"name": "Johnny Cage", "team": "Mortal Kombat", "points": "33"},
            {"name": "Ricky Gervais", "team": "The Offices", "points": "2001"},
            {"name": "Chester Cheetah", "team": "Detroit Tigers", "points": "21"},
            {"name": "Drake", "team": "Rap Guy", "points": "64"},
            {"name": "Lovely Rita", "team": "Beatles Song", "points": "11"},
            {"name": "Pinocchio", "team": "Fairy Tails", "points": "22"},
            {"name": "Pamela Anderson", "team": "Baywatch", "points": "31"},
            {"name": "Yellow Submarine", "team": "Beatles Song", "points": "221"},
            {"name": "Red Honda", "team": "Cool Cars", "points": "213"},
            {"name": "Mickey Lolich", "team": "Detroit Tigers", "points": "121"}
          ]
}

这是我尝试进行渲染的类：

class TextRoster extends Component {
    render() {
        const playerList = sample_roster.players;
        const columns = [
            {
                Header: 'Name',
                accessor: 'name'
            },
            {
                Header: 'Team',
                accessor: 'team'
            },
            {
                Header: 'Points',
                accessor: 'points'
            }
        ];
        return (
            <ReactTable
                data={playerList}
                columns={columns}
            />
        )
    }
}

Answer 1

我看不出您的代码有任何问题。可能获取数据有问题。 我已经使用了您的数据和列并尝试生成问题，但它可以顺利运行。

class App extends React.Component {
  constructor() {
    super();
  }

  render() {
    const sample_rooster = {
      "players":
        [
          { "name": "Bill Freehan", "team": "Detroit Tigers", "points": "51" },
          { "name": "Bobby France", "team": "Montreal Oilers", "points": "13" },
          { "name": "Dwayne Johnson", "team": "Wrestlemania", "points": "25" },
          { "name": "Mario Lemeaux", "team": "Hockey Guy", "points": "89" },
          { "name": "Dancing Queen", "team": "ABBA", "points": "53" },
          { "name": "Eric The Red", "team": "Unicorns", "points": "43" },
          { "name": "Yasmeen Bleeth", "team": "Baywatch", "points": "151" },
          { "name": "Bill Lambeer", "team": "Detroit Pistons", "points": "8" },
          { "name": "Bill Pullman", "team": "Independence Day", "points": "111" },
          { "name": "Tony The Tiger", "team": "Detroit Tigers", "points": "41" },
          { "name": "Johnny Cage", "team": "Mortal Kombat", "points": "33" },
          { "name": "Ricky Gervais", "team": "The Offices", "points": "2001" },
          { "name": "Chester Cheetah", "team": "Detroit Tigers", "points": "21" },
          { "name": "Drake", "team": "Rap Guy", "points": "64" },
          { "name": "Lovely Rita", "team": "Beatles Song", "points": "11" },
          { "name": "Pinocchio", "team": "Fairy Tails", "points": "22" },
          { "name": "Pamela Anderson", "team": "Baywatch", "points": "31" },
          { "name": "Yellow Submarine", "team": "Beatles Song", "points": "221" },
          { "name": "Red Honda", "team": "Cool Cars", "points": "213" },
          { "name": "Mickey Lolich", "team": "Detroit Tigers", "points": "121" }
        ]
    }
    return (
      <div>
        <ReactTable
          data={sample_rooster.players}
          columns={[
            {
              Header: 'Name',
              accessor: 'name'
            },
            {
              Header: 'Team',
              accessor: 'team'
            },
            {
              Header: 'Points',
              accessor: 'points'
            }
          ]}
          defaultPageSize={10}
          className="-striped -highlight"
        />
      </div>
    );
  }
}

编辑：你也可以把你的数据放在你的状态。

有关更多信息，请尝试按照官方网站中提供的示例进行操作 https://react-table.js.org/#/story/simple-table