添加错误消息以响应搜索过滤器答案

【问题标题】：Adding error message to react search filter添加错误消息以响应搜索过滤器
【发布时间】：2021-12-16 04:56:42
【问题描述】：

我正在尝试在 React 中实现搜索过滤器。我能够使过滤器正常工作，当没有搜索结果时，如何在此处添加错误消息

export default class Search {
  ...

 search = (event) => {
 let word = event.target.value;
 this.setState({ search: word });
 };

  render() {
  const datas = data
  .filter((item) => {
    if (this.state.search == null) return item;
    else if (
      item.name.toLowerCase().includes(this.state.search.toLowerCase())
    )
      return item;
  })
  .map((item) => {
    return (
      <div>
        <p>{item.name}</p>
      </div>
    );
  });

return (
  <div>   
    <input
      type="text"
      placeholder="Search"
      onChange={(e) => this.search(e)}
    />
    {datas}
  </div>
  );
  }
}

这是我的代码。但如果没有找到结果，我无法有条件地渲染它并添加错误消息

【问题讨论】：

标签： reactjs react-native search filter

【解决方案1】：

如果datas 为空，则简单地呈现一些错误消息：

export default class Search {
  ...

 search = (event) => {
 let word = event.target.value;
 this.setState({ search: word });
 };

  render() {
  const datas = data
  .filter((item) => {
    if (this.state.search == null) return item;
    else if (
      item.name.toLowerCase().includes(this.state.search.toLowerCase())
    )
      return item;
  })
  .map((item) => {
    return (
      <div>
        <p>{item.name}</p>
      </div>
    );
  });

return (
  <div>   
    <input
      type="text"
      placeholder="Search"
      onChange={(e) => this.search(e)}
    />
    {datas.length === 0 ? 'No results were found' : datas}
  </div>
  );
  }
}

【讨论】：