Проблема с реактивной таблицей при рендеринге и css импорте - PullRequest
Новая
       17

Проблема с реактивной таблицей при рендеринге и css импорте

1 голос
/ 23 апреля 2020

У меня есть компонент, который я отображаю в родительском компоненте. Но он не работает и выдает мне ошибку

Тип реагирования. Недопустимый тип ожидаемой строки, но получил неопределенное значение

У меня есть данные в состоянии объекта, который является массивом объектов. 

import React, { Component } from "react";
import ReactTable from "react-table";
//import "react-table/react-table.css";


class CustomerTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tableData: this.props.Data,
    };
  }

  render() {
    console.log("this.state.tableData", this.state.tableData);
    const columns = [
      {
        Header: "Customer ID",
        accessor: "CUSTOMER_ID",
      },
      {
        Header: "Customer Name",
        accessor: "NAME",
      },
      {
        Header: "Customer Type",
        accessor: "TYPE",
      },
    ];
    return (
      <div>
        <ReactTable columns={columns} data={this.state.tableData}>
        </ReactTable>
      </div>
    );
  }
}

export default CustomerTable;

Другая проблема заключается в том, что, если я раскомментирую css строку импорта, я получаю сообщение об ошибке

Модуль не найден: не удается разрешить ' реактивная таблица / реактивная таблица. css '

Я проверил в пакете. json, и его версия - "реактивная таблица": "^ 7.0.4". Но я не вижу файл реакции-таблицы. css в файле node_module. Что мне здесь не хватает.

1 Ответ

1 голос
/ 23 апреля 2020

Реактивная таблица 7x полностью отличается от предыдущей версии. Ваш код выглядит как таблица реакции версии 6.

Вам необходимо установить Reaction-Table-6 

npm i react-table-6

или 

yarn add react-table-6

После Для установки вам нужно импортировать таблицу реагирования следующим образом 

import ReactTable from 'react-table-6';
import 'react-table-6/react-table.css';

После этого ваш код должен работать. Попробуйте.

Что касается вашей первой проблемы, состояние может не содержать данных в начальном рендере.

попробуйте заменить 

<ReactTable columns={columns} data={this.state.tableData}>

на 

<ReactTable columns={columns} data={this.state.tableData || []}>
...