React-Table в смеси с React-компонентами

Question

Я новичок в response-table, поэтому мне не удается запустить пример. Код очень простой. 1) Приложение. js - свяжите URI с новым отчетом о продаже React.

class App extends Component {
  render() {
    return (
      <div className="App">
        <Router>
          <div>
            <Navbar />
            <Switch>
              <Route exact path="/reportsales" render={() => <ReportSalesReactTable  /> } />
            </Switch>
            <Footer />
          </div>
        </Router>
      </div>
    );
  }
}

2) ReportSalesReactTable. js - Используйте таблицу реакций для отображения некоторых данных исправления (как тестовые) Импорт React from ' react 'import ReactTable from' response-table '

function ReportSalesReactTable() {
    let salesArray = [
        {
            name: "James",
            surname: "van der Walt",
            vendorId: "0",
            kioskId: "0",
            description: "Unknown Stock",
            units: "1",
            costPrice: "6",
            salePrice: "8",
            discount: "0",
            saleDateTime: "2019-10-28T11:53:00.000Z"
        },
        {
            name: "James",
            surname: "van der Walt",
            vendorId: "0",
            kioskId: "0",
            description: "bubbles",
            units: "1",
            costPrice: "6",
            salePrice: "8",
            discount: "0",
            saleDateTime: "2019-10-28T11:53:00.000Z"
        },
        {
            name: "James",
            surname: "van der Walt",
            vendorId: "0",
            kioskId: "0",
            description: "Unknown",
            units: "1",
            costPrice: "0.6",
            salePrice: "0.68",
            discount: "0",
            saleDateTime: "2019-10-28T11:53:00.000Z"
        }
    ];

    const columns = [
        {
            Header: "V-Id",
            accessor: "vendorId"
        },
        {
            Header: "Name",
            accessor: "name"
        },
        {
            Header: "Surname",
            accessor: "surname"
        },
        {
            Header: "Kiosk Id",
            accessor: "kioskId"
        },
        {
            Header: "Description",
            accessor: "description"
        },
        {
            Header: "Quantity",
            accessor: "units"
        },
        {
            Header: "Cost Price",
            accessor: "costPrice"
        },
        {
            Header: "Retail Price",
            accessor: "salePrice"
        },
        {
            Header: "Discount",
            accessor: "discount"
        },
        {
            Header: "Date",
            accessor: "saleDateTime"
        }
    ]
    return (
        <div>
            <ReactTable columns={columns} data={salesArray} />
        </div>
    )
}

export default ReportSalesReactTable

3) Я получаю следующую ошибку: ** Тип элемента недействителен: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined. Скорее всего, вы забыли экспортировать компонент из файла, в котором он определен, или могли перепутать импорт по умолчанию и именованный импорт.

Проверьте метод рендеринга ReportSalesReactTable. **

Насколько я понимаю, таблица ответов не хочет вызываться из компонента React (приложение js). Однако остальная часть веб-приложения теперь использует компоненты реагирования, поэтому я не знаю, как связать эту таблицу реагирования с остальной частью веб-приложения через приложение. js -> инструкции маршрута переключения.

Есть идеи, как визуализировать React-таблицу, если вы используете реагирующие компоненты?

Спасибо за помощь

Answer 1

Привет, я не смог попробовать ваш пример, так как это более низкая версия ReactTable. но в моей среде у меня была версия

"react-table": "^7.1.0",

Не могли бы вы попробовать обновить версию react-table до 7.1.0 и попробовать приведенный ниже пример? он работает отлично

import React from "react";
import {useTable} from "react-table";
import styled from 'styled-components'

function ReportSalesReactTable() {
    let salesArray = [
        {
            name: "James",
            surname: "van der Walt",
            vendorId: "0",
            kioskId: "0",
            description: "Unknown Stock",
            units: "1",
            costPrice: "6",
            salePrice: "8",
            discount: "0",
            saleDateTime: "2019-10-28T11:53:00.000Z"
        },
        {
            name: "James",
            surname: "van der Walt",
            vendorId: "0",
            kioskId: "0",
            description: "bubbles",
            units: "1",
            costPrice: "6",
            salePrice: "8",
            discount: "0",
            saleDateTime: "2019-10-28T11:53:00.000Z"
        },
        {
            name: "James",
            surname: "van der Walt",
            vendorId: "0",
            kioskId: "0",
            description: "Unknown",
            units: "1",
            costPrice: "0.6",
            salePrice: "0.68",
            discount: "0",
            saleDateTime: "2019-10-28T11:53:00.000Z"
        }
    ];

    const columns = [
        {
            Header: "V-Id",
            accessor: "vendorId"
        },
        {
            Header: "Name",
            accessor: "name"
        },
        {
            Header: "Surname",
            accessor: "surname"
        },
        {
            Header: "Kiosk Id",
            accessor: "kioskId"
        },
        {
            Header: "Description",
            accessor: "description"
        },
        {
            Header: "Quantity",
            accessor: "units"
        },
        {
            Header: "Cost Price",
            accessor: "costPrice"
        },
        {
            Header: "Retail Price",
            accessor: "salePrice"
        },
        {
            Header: "Discount",
            accessor: "discount"
        },
        {
            Header: "Date",
            accessor: "saleDateTime"
        }
    ];


    const Styles = styled.div`
  padding: 1rem;

  table {
    border-spacing: 0;
    border: 1px solid black;

    tr {
      :last-child {
        td {
          border-bottom: 0;
        }
      }
    }

    th,
    td {
      margin: 0;
      padding: 0.5rem;
      border-bottom: 1px solid black;
      border-right: 1px solid black;

      :last-child {
        border-right: 0;
      }
    }
  }
`;

    function Table({columns, data}) {
        const {
            getTableProps,
            getTableBodyProps,
            headerGroups,
            rows,
            prepareRow,
        } = useTable({
            columns,
            data,
        });

        return (
            <table {...getTableProps()}>
                <thead>
                {headerGroups.map(headerGroup => (
                    <tr {...headerGroup.getHeaderGroupProps()}>
                        {headerGroup.headers.map(column => (
                            <th {...column.getHeaderProps()}>{column.render('Header')}</th>
                        ))}
                    </tr>
                ))}
                </thead>
                <tbody {...getTableBodyProps()}>
                {rows.map((row, i) => {
                    prepareRow(row);
                    return (
                        <tr {...row.getRowProps(
                            {
                                style: {backgroundColor: row.values.tIncome > 50 ? 'skyblue' : 'lightgray'}
                            }
                        )}>
                            {row.cells.map(cell => {
                                return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                            })}
                        </tr>
                    )
                })}
                </tbody>
            </table>
        )
    }

    return (
        <div>
            <Styles>
                <Table columns={columns} data={salesArray}/>
            </Styles>
        </div>
    )
}
export default ReportSalesReactTable