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
}

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

1 个答案: