React搜索过滤功能无匹配结果时如何添加错误提示

实现逻辑：

• 拆分过滤与列表渲染逻辑，先单独获取过滤后的原始数据数组，用于判断匹配结果数量
• 增加双重条件判断：仅当过滤结果为空、且用户输入了有效搜索词时，才渲染无结果提示，避免初始加载时误触发提示

修改后的完整代码如下：

export default class Search {
  // 其余原有逻辑保持不变
  search = (event) => {
    let word = event.target.value;
    this.setState({ search: word });
  };

  render() {
    const searchWord = this.state.search?.toLowerCase().trim() || ''
    // 先单独做过滤，不直接链式调用map
    const filteredData = data.filter((item) => {
      if (!searchWord) return true
      return item.name.toLowerCase().includes(searchWord)
    })
    // 再把过滤后的数据映射为渲染节点
    const datas = filteredData.map((item) => {
      return (
        // 建议补充唯一key属性，避免React列表渲染警告
        <div key={item.id}>
          <p>{item.name}</p>
        </div>
      );
    });

    return (
      <div>   
        <input
          type="text"
          placeholder="Search"
          onChange={this.search}
        />
        {/* 条件渲染：有结果渲染列表，无结果且有搜索词时显示提示 */}
        {filteredData.length ? (
          datas
        ) : searchWord ? (
          <p style={{color: '#f5222d'}}>未找到匹配的搜索结果，请调整关键词后重试</p>
        ) : null}
      </div>
    );
  }
}

你可以根据需求自行调整提示文案、样式，也可以替换为自定义的提示组件。

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