时间戳

首页 > 解决方案 > reactjs中的搜索过滤和下拉过滤

javascript - reactjs中的搜索过滤和下拉过滤

问题描述

在下面的渲染方法中，我在卡片上执行搜索过滤器和下拉过滤器。搜索和 dropdwon 过滤工作正常，但问题是，当我的组件第一次渲染时，我没有在屏幕上看到任何 Card sen。只有当我在下拉列表中输入一些值时，我才会在屏幕上看到卡片。谁能帮我看看我的代码有什么问题，以及如何先显示卡片然后在那里执行过滤和搜索。如果我删除.filter ((data) => data === this.state.filter) ，我将能够在组件渲染时渲染数据，但随后我将不允许执行 dropdwon 过滤器。我认为这个过滤器导致了这个问题，但不知道如何解决它，以及执行搜索和下拉过滤

 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) => 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>
    )

标签： javascriptreactjstypescriptfiltering

解决方案

由于您this.state.filter最初离开了undefined这就是为什么在第一次渲染时您看不到任何结果。

您应该将默认过滤器添加到初始状态：

state: {
   filter: "<an initial value based on your data>"
}

或在设置时应用过滤器：

const data = items
              .filter((data) => this.state.filter && (data === this.state.filter) ? true: false)

推荐阅读