Question

 handleChange(e, isEnter) {
  const searchData = () => {
  let tempMenuProductDetails = this.props.menu_items;
  if (this.state.searchString == null) {
    this.setState({
      displayItems: tempMenuProductDetails
    }, function () {
      console.log(this.state.displayItems);
    })
  }
  const filterArray = tempMenuProductDetails.reduce((result, category) => {
    if (category.categoryName.toLowerCase().indexOf(this.state.searchString.toLowerCase()) > -1) {
      result.push(category);
    }
    if (category.productList && category.productList.length > 0) {
      category.productList = category.productList.reduce((productListResult, productList) => {
        if (!!productList.productName && productList.productName.toLowerCase().indexOf(this.state.searchString.toLowerCase()) > -1) {
          productListResult.push(productList);
        }
        return productListResult;
      }, []);
    }
    if (category.productList.length) {
      result.push(category);
    }
    return result;
  }, []);
  this.setState({
    displayItems: filterArray
  }, function () {
    console.log(this.state.displayItems);
  })
}
if (!isEnter) {
  this.setState({
    searchString: e.target.value
  });
} else {
  searchData();
}
}

search(e) {
  if (e.keyCode == 13) {
  this.handleChange(e, true);
 }
  this.handleChange(e, false);
 }

 render() {
   return (
      <FormControl value={this.state.searchString} type="text" 
         placeholder="Search Items"
         className="search" onChange={this.handleChange} onKeyDown=
       {this.search} />
      )
   }

此搜索功能的问题在于，它在搜索时提供重复数据，并且当有人在输入框中搜索任何内容而不是按Enter键时，不会重新呈现原始数据。

对于前 - 如果我搜索＆＃34;鸡＆＃34;然后按Enter键，它会显示两次正确的数据。然后我删除鸡并按下输入，在搜索框中没有输入任何内容，它不会重新渲染原始数据。我该如何解决这个问题？

它仅在刷新页面时重新呈现原始数据。如果我删除＆＃34; if（this.state.searchString == null）＆＃34;它可以正常工作代码的一部分。

提前致谢。 I searched fries and pressed enter,it shows fries.Then I clear searchbox and press enter,it shows two fries

Answer 1

请更新 if 条件以检查 falsy 值，即null和空字符串。当您在搜索“鸡”后删除“鸡”时，状态对象不为空，而是空字符串，长度为零“”。因此，我们必须检查长度。

检查 falsy 值的好方法，如

  if (!this.state.searchString) {
    this.setState({
      displayItems: tempMenuProductDetails
    }, function () {
      console.log(this.state.displayItems);
    })
  }

显示有关在反应中搜索空字符串的数据

1 个答案: