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 => { ....... 

) || <span>no data....</span>}