Данные ReactTable не отображаются - PullRequest
Новая
       8

Данные ReactTable не отображаются

0 голосов
/ 10 октября 2018

Я новичок в React и ReactTables.Я не могу получить данные для рендеринга в моей таблице.Сама таблица отображает и имеет правильное количество строк, заданных моим набором данных (добавление большего количества строк в JSON добавляет больше строк в таблицу), но на самом деле ничто не заполняет ни заголовки, ни сами ячейки.Я также проверил правильность синтаксического анализа JSON, распечатав sample_roster.players на консоль.У меня нет пользовательских CSS, применяемых к этой таблице.По умолчанию все импортируется по реакции-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}
            />
        )
    }
}

1 Ответ

0 голосов
/ 10 октября 2018

Я не вижу никаких проблем с вашим кодом.Возможно, есть проблема с получением данных.Я использовал ваши данные и столбцы и попытался сгенерировать проблему, но она работает без помех. 

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

...