如何修复无法正常工作的 ReactJS 过滤搜索

Question

我正在开发一些 reactjs 项目，该项目将根据用户查询显示数据。用户可以通过复选框输入和过滤数据。 它实际上工作正常，用户在搜索栏中输入内容并记录正确获取数据。问题是当用户使用复选框过滤某些数据时，会显示确切的数据，但是当他们删除/取消选中复选框时，过滤后的数据不会显示，而是显示整个数据。 我希望，当用户从他们输入的数据中删除/取消选中复选框时，它会显示用户输入的原始数据。 如果我的语言有点难以理解，我很抱歉。我将提供我的代码，请看一下并帮助我弄清楚我是否犯了一些错误，还请告诉我解决此问题的最佳做法是什么。我是 React 的初学者，没有太多知识来解决这个问题。谢谢

import React from 'react';
  import logo from './logo.svg';
  import { Dropdown } from 'semantic-ui-react'
  import './App.css'
  import DropdownCheckbox from './components/dropdownCheckbox/dropdownCheckbox';

  class App extends React.Component {
    constructor(props) {
      super(props)

      this.state = {
        furnitureStyles: [],
        products: [],
        checkedFS: [],
        checkedDT: [],
        searchFilt: "",
        filteredProduct: []
      };
    };

    async onDropdownChange(val){
      await this.setState({
        checkedFS: val
      })
      await this.filteredFurnitureStyle()
    }

    fetchData(){
      fetch('http://www.mocky.io/v2/5c9105cb330000112b649af8')
      .then( response => {
        if(response.status === 200){
          return response.json()
        }
      })
      .then(responseJson => {
        this.setState({
          furnitureStyles: responseJson.furniture_styles,
          products: responseJson.products,
          filteredProduct: responseJson.products
        })
      })
    }

    componentDidMount(){
      this.fetchData()
    }

    loadingPage(){
      return(
        <div>
          Please Wait ...
        </div>
      )
    }

    regexDesc(value){
      return value.replace(/(?<=^.{115}).*/, " ...")
    }

    async filteringFunc(e){

      const { checkedDT, checkedFS, searchFilt, products, filteredProduct } = this.state
      if(e.target.value !== "") {
          let search = products.filter(product => product.name.toLowerCase().indexOf(e.target.value.toLowerCase()) !== -1)
          this.setState({
            filteredProduct : search
          }) 
        } else if(e.target.value === ""){
          this.setState({
            filteredProduct: products 
          })
        }
    }

    async onDropdownChange(val){
      await this.setState({
        checkedFS: val
      })
      await this.filteredFurnitureStyle()
    }

    filteredFurnitureStyle = () => {
      const { filteredProduct, checkedFS, products } = this.state
      if(checkedFS.length > 0) {
        let search = filteredProduct.filter(product => (
          checkedFS.findIndex(element => product.furniture_style.indexOf(element) !== -1) !== -1
        ))
        this.setState({
          filteredProduct: search
        })
      } else {
        this.setState({
          filteredProduct: products
        })
      }
    }



    render(){
      const { furnitureStyles, products, checkedDT, checkedFS, filteredProduct } = this.state
        return (
          <div className="App">
            <header>
              <div className="search-section">
                <input type="search"
                  placeholder="Search Furniture ..."
                  className="search-input"
                  onChange={(e)=>this.filteringFunc(e)}
                />
              </div>
              <div className="dropdown-section"
              >
                {furnitureStyles.length > 0 ? (
                  <React.Fragment>
                    <DropdownCheckbox
                      style={{margin:"0 24px"}}
                      defaultSelected="Furniture Style"
                      options={furnitureStyles}
                      onChange={(val)=>this.onDropdownChange(val)}
                    />
                    <DropdownCheckbox
                      style={{margin:"0 24px"}}
                      defaultSelected="Delivery Time"
                      options={["1 week","2 weeks", "1 Month", "more..."]}
                      onChange={val=>this.setState({
                        checkedDT: val
                      })}
                    /> 
                  </React.Fragment>) : "Loading"
                }
              </div>  
            </header>
            <div id="section2">
              <div className="card-section">
                {products.length > 0 && 
                  filteredProduct.map(product => {
                    return (
                      <div className="ui cards flexing">
                        <div className="ui fluid card content">
                          <div className="card-header">
                            <h4>
                              {product.name}
                            </h4>
                            <span>
                              IDR {product.price}
                            </span>
                          </div>
                          <div>
                            <span>
                              {this.regexDesc(product.description)}
                            </span>
                            <div>
                              <ul className="furniture-styles">
                                {product.furniture_style.map(style => {
                                  return (
                                    <li>{style}</li>
                                  )
                                })}
                              </ul>
                            </div>
                          </div>
                          <div>
                            <span>{product.delivery_time} {product.delivery_time > 1 ? "days" : "day"}</span>
                          </div>
                        </div>
                      </div>
                    )
                  }) 
                }
              </div>
            </div>
          </div>
        );
    }
  }

  export default App;

Answer 1

await this.setState 行不通。如果更新状态后需要调用函数，使用setState的回调函数：

onDropdownChange = (val) => {
  this.setState({
    checkedFS: val
  }, this.filteredFurnitureStyle) // Use callback
}