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

我看不到您的代码有任何问题。也许获取数据有问题。我已经使用了您的数据和列并尝试生成此问题，但是它没有任何问题。

approved records

编辑：您也可以将数据置于状态。

有关更多信息，请尝试遵循官方网站上提供的示例 https://react-table.js.org/#/story/simple-table

ReactTable数据未呈现

1 个答案: