ReactJS中如何在TableCell内添加条件语句实现无结果提示

核心思路 #

要实现搜索无数据时的提示，关键是判断过滤后的数据数组长度，然后在表格主体部分做整体渲染判断，而非仅在单个TableCell内处理。

原生Material-UI Table实现示例 #

假设你用的是Material-UI的Table组件，且已维护了搜索过滤后的filteredData状态：

import { Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';
import { useState } from 'react';

// 初始数据示例
const originalData = [
  { id: 1, name: '张三', email: 'zhangsan@example.com' },
  { id: 2, name: '李四', email: 'lisi@example.com' }
];
const [filteredData, setFilteredData] = useState(originalData);

// 搜索处理逻辑
const handleSearch = (e) => {
  const keyword = e.target.value.trim().toLowerCase();
  const result = originalData.filter(item => 
    item.name.toLowerCase().includes(keyword) || item.email.toLowerCase().includes(keyword)
  );
  setFilteredData(result);
};

// 表格渲染
return (
  <>
    <input type="text" onChange={handleSearch} placeholder="搜索..." />
    <Table>
      <TableHead>
        <TableRow>
          <TableCell>姓名</TableCell>
          <TableCell>邮箱</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        {filteredData.length === 0 ? (
          {/* 跨列显示提示，colSpan值要与表头列数一致 */}
          <TableRow>
            <TableCell colSpan={2} align="center" sx={{ padding: '20px 0' }}>
              未找到内容
            </TableCell>
          </TableRow>
        ) : (
          filteredData.map(item => (
            <TableRow key={item.id}>
              <TableCell>{item.name}</TableCell>
              <TableCell>{item.email}</TableCell>
            </TableRow>
          ))
        )}
      </TableBody>
    </Table>
  </>
);

第三方DataTable组件适配 #

如果你使用的是react-data-table-component这类封装组件，直接用组件提供的无数据占位属性即可：

import DataTable from 'react-data-table-component';

// 列配置示例
const columns = [
  { name: '姓名', selector: row => row.name },
  { name: '邮箱', selector: row => row.email }
];

return (
  <>
    <input type="text" onChange={handleSearch} placeholder="搜索..." />
    <DataTable
      columns={columns}
      data={filteredData}
      // 自定义无数据提示
      noDataComponent={<div style={{ padding: '20px', textAlign: 'center' }}>未找到内容</div>}
    />
  </>
);

排查之前三元运算符失效的常见原因 #

1. 判断逻辑错误：仅判断单个字段而非整个数据数组的长度，导致提示无法触发
2. 未设置跨列（colSpan）：仅在单个TableCell显示提示，被其他空单元格遮挡，视觉上无效果
3. 数据状态未同步：搜索后filteredData未更新为过滤后的结果，判断条件不生效

内容的提问来源于stack exchange，提问作者KE Press