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

Question

我正在尝试使用反应表 v7显示一些数据。它使用useTable hook完美工作，除了它只显示一个空表，没有预期的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,

        },

这是表格在没有数据的情况下的视觉效果。如何让 reactTable（使用可用挂钩）在它为空时显示“无数据”文本，并在获取数据时可能显示“加载”文本。

Answer 1

你正在为每个人map打电话。pagerow所以在此之前，您可以检查页面是否不包含任何行，并返回适当的消息。例如：{(page.length > 0 && page.map( row => { .......&nbsp;) || <span>no data....</span>}