如何在React Hooks实现的搜索功能中为无效搜索展示错误提示消息

修改方案 #

你只需要调整表格tbody部分的渲染逻辑，通过判断过滤后的公司列表长度，分情况展示内容即可，修改步骤如下：

1. 替换原来标签内的列表渲染代码，增加空数据分支判断
2. 可以顺便修复原代码的两个规范问题：React中元素属性要写className而非class，列表渲染要加唯一key属性避免控制台警告

修改后的核心代码片段

<tbody>
  {filteredCompanies.length > 0 ? (
    filteredCompanies.map(company =>(
      {/* 此处key替换为你数据中唯一的字段即可，比如公司id或者注册号 */}
      <tr key={company.companyRegNumber}>
        <td>{count++}</td>
        <td>{company.companyRegNumber}</td>
        <td>{company.companyName}</td>
        <td>{company.companyAddress}</td>
        <td><button onClick={() => openPopup(true)} className="btn-view"><ViewIcon/>View</button></td>
      </tr>
    ))
  ) : (
    <tr>
      {/* 占满5列整行 */}
      <td colSpan="5" style={{textAlign: 'center', padding: '24px 0', color: '#888'}}>
        {/* 根据是否有搜索词展示不同提示 */}
        {search ? '未找到匹配的公司，请调整搜索关键词后重试' : '暂无企业数据'}
      </td>
    </tr>
  )}
</tbody>

可选优化：增加加载状态

如果要避免刚进入页面、还没从MongoDB拉取到数据时误显示「暂无企业数据」，可以在Redux的companyState里给初始的companies设为null，然后在table外层加加载判断：

<div className="table-box">
  {/* 数据还在加载中展示加载提示 */}
  {!companies ? (
    <div style={{textAlign: 'center', padding: '24px 0'}}>数据加载中，请稍候...</div>
  ) : (
    <table>
      {/* 原来的thead和修改后的tbody代码放在这里 */}
    </table>
  )}
</div>

内容的提问来源于stack exchange，提问作者Angela Raveendraraj