ReactTable v7-noDataText不显示在空数据上使用useTableHook

问题描述

我正在尝试使用反应表v7 显示一些数据。它可以使用 useTable钩子完美地工作，除了它只显示一个空表，没有期望的 noDataText 。

import React,{ useContext,useEffect,useMemo } from 'react'
import {
    useTable,useSortBy,useFilters,usePagination,} from 'react-table'
import '../css/datatable.css'
import WarehouseAction from './WarehouseAction'
import { WarehouseContext } from '../context/WarehouseContext'
import { AuthContext } from '../context/AuthContext'
import AddStock from './AddStock'
import { Filter,DefaultColumnFilter } from './Filter'
import { InlineIcon } from '@iconify/react'
import ChevronCircleUp from '@iconify/icons-jam/chevron-circle-up'
import ChevronCircleDown from '@iconify/icons-jam/chevron-circle-down'






function WarehouseData() {

    const { warehouseData,getWarehouseRequest } = useContext(WarehouseContext)
    const { profile } = useContext(AuthContext)


    useEffect(() => {
        getWarehouseRequest()
    },[])


    
    const data = useMemo(() => [...warehouseData],[warehouseData])
    
    const columns = useMemo(() => [
        { Header: 'Stock',accessor: 'stock',disableSortBy: true,},{ Header: 'Description',accessor: 'description',disableSortBy: true},{ Header: 'Price',accessor: 'unit_price',disableFilters: true},{ 
            Header: 'Total',accessor: 'units_total',Cell: ({cell}) => {
                if (cell.row.values.units_total === 0){
                    return <p style={{ color: '#f00'}}>Out of Stock</p>
                } else if (cell.row.values.units_total < 5){
                    return <p style={{ color: '#ffa600'}}>{cell.row.values.units_total}</p>
                } else {
                    return <p style={{ color: '#090'}}>{cell.row.values.units_total}</p>
                }
            },disableFilters: true,{ Header: 'Updated',accessor: 'record_updated',{ 
            Header: 'Action',accessor: 'id',Cell: ({cell}) => (
                <WarehouseAction key={cell.row.values.id}
                    id={cell.row.values.id} 
                    stock={cell.row.values.stock} 
                    description={cell.row.values.description} 
                    price={cell.row.values.unit_price} 
                    total={cell.row.values.units_total} 
                    updated={cell.row.values.record_updated} 
                />
            ),],[])


    const generateSortingIndicator = column => {
        return column.isSorted ? 
            (column.isSortedDesc) ?
                <InlineIcon className="inline-icon" icon={ChevronCircleDown} />
                : <InlineIcon className="inline-icon" icon={ChevronCircleUp} />
                : ""
    }


    const onChangeInSelect = event => {
        setPageSize(Number(event.target.value))
    }

    const onChangeInInput = event => {
        const page = event.target.value ? Number(event.target.value) -1 : 0
        gotoPage(page)
    }


    const {
        getTableProps,getTableBodyProps,headerGroups,// rows,page,prepareRow,canPrevIoUsPage,canNextPage,pageOptions,pageCount,gotoPage,nextPage,prevIoUsPage,setPageSize,state: { pageIndex,pageSize }
    } = useTable(
        { 
            columns,data,defaultColumn: { Filter: DefaultColumnFilter },initialState: { pageIndex: 0,pageSize: 5}
        },)


    return (
        <React.Fragment>
            <div className="table-top">    
                { profile.is_admin && (<AddStock mode={"WAREHOUSE"}/> )}
            </div>
            <table {...getTableProps()}>
                <thead>
                    {headerGroups.map(headerGroup => (
                        <tr {...headerGroup.getHeaderGroupProps()}>
                            {headerGroup.headers.map(column => (
                                <th {...column.getHeaderProps()}>
                                    <div {...column.getHeaderProps(column.getSortByToggleProps())}>
                                        {column.render('Header')}
                                        {generateSortingIndicator(column)}
                                    </div>
                                    <Filter column={column} />
                                </th>
                            ))}
                        </tr>
                    ))}
                </thead>

                <tbody {...getTableBodyProps()}>
                    {page.map( row => {
                        prepareRow(row)
                        return(
                            <tr {...row.getRowProps()}>
                                {row.cells.map(cell => {
                                    return (
                                        <td {...cell.getCellProps()}>
                                            {cell.render('Cell')}
                                        </td>
                                    )
                                })}
                            </tr>
                        )
                    })}
                </tbody>
            </table>

            <ul id="pagination">
                <li className="page-item" onClick={() => gotoPage(0)} disabled={!canPrevIoUsPage}>
                    First
                </li>
                <li className="page-item" onClick={() => prevIoUsPage()} disabled={!canPrevIoUsPage}>
                    {'<'}
                </li>
                <li className="page-count">
                    <strong>
                        {pageIndex + 1}
                    </strong>
                </li>
                <li className="page-item" onClick={() => nextPage()} disabled={!canNextPage}>
                    {'>'}
                </li>
                <li className="page-item" onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage}>
                    Last
                </li>
                <li className="page-input">
                    <input
                        type="number"
                        defaultValue={pageIndex + 1}
                        min={1}
                        max={pageOptions.length}
                        onChange={onChangeInInput}
                        />
                </li>
                <select
                    value={pageSize}
                    className="page-select"
                    onChange={onChangeInSelect}>
                        <option key={pageSize} value={pageSize}>
                            Show {pageSize}
                        </option>
                </select>
            </ul>
        </React.Fragment>
    )
}

export default WarehouseData

这里是没有数据的情况下表格的外观。我如何获得reactTable（使用usetable钩子）在空时显示“无数据”文本，而在获取数据时可能显示“正在加载”文本。

解决方法

您正在为每个app/assets/images/在TimeField NewTime HourOnly 102157 10:21:57 10 am 071740 07:17:40 7 am 000602 00:06:02 12 am 225058 22:50:58 10 pm 上呼叫map。

因此，在此之前，您可以检查页面是否不包含任何行，并返回适当的消息。

例如：

page