javascript - 过滤时找不到数据时如何显示错误消息

Question

我有一个组件，正在执行搜索过滤和下拉过滤，过滤正在工作，但是如果在过滤时未找到数据，则无法弄清楚显示错误的位置。谁能帮我这个

 searchSpace = (event) => {
            this.setState({
              search: event.target.value,
            });
          };
    
 sortOptions = [
    {value: "ALL", label: "All"},
    { value: "Iphone", label: "Iphone" },
    { value: "Samsung", label: "Samsung" },
  ];

  getSelectedItem = (items, selectedValue) => {
    return items.find((item) => item.value === selectedValue);
  };

  dropdown = (event) => {
        console.log("filter", event.selectedItem.value);
        this.setState({
          filter: event.selectedItem.value,
        });
      };

     render() {
           const { details} = this.state;
          const items = this.state.details
              .filter((data) => {
                if (this.state.search == null) return data;
                else if (data.includes(this.state.search)) {
                  return data;
                }                
              })
              const data = items
              .filter((data) => this.state.filter === "" || data === this.state.filter)
              .map((data) =>
                   <>
                  <ShareCard></ShareCard>
                </>    
            );
    return (
  <Search placeHolderText="Search" onChange={(e) => this.searchSpace(e)}/>

<Dropdown id="filtering items={this.sortOptions}
 onChange={(e) => this.dropdown(e)}
  selectedItem={this.getSelectedItem(
 this.sortOptions,
 this.state.filter
 )} />

    <div>{data}</div>
    )
    );

Answer 1

如果items为空，则显示错误的一个非常简单的用例是使用conditional rendering。如果items数组的长度是真实的，即大于零，则呈现数据，否则呈现错误消息。

<div>
  {items.length ? data : "Error: There are no items!!"}
</div>