如何避免在React JS中的搜索栏下一次显示所有元素

Question

我尝试了这个，甚至在输入要搜索的值之前，所有产品都会出现在搜索栏下方，如何仅在搜索时显示产品。请帮忙提前致谢搜索栏.jsimport React, { Component } from 'react'import {storeProducts} from '../data';import Product from './Product';import styled from 'styled-components';export default class SearchBar extends Component { constructor(){  super();  this.state={   search: '',    }; } updateSearch(event) { this.setState({search:event.target.value.substr(0,20)}) } render() {  let filteredProducts = storeProducts.filter(   (product) => {    return product.title.indexOf(this.state.search) !== -1;   }  );  return (   <SearchWrapper>   <input type="text" value={this.state.search} onChange={this.updateSearch.bind(this)} placeholder="search"/>   {filteredProducts.map((product) => {    return <li> <Product product={product} key={product.title}/></li>   })}   </SearchWrapper>  ) }}const SearchWrapper = styled.div`background:#f6f6f6;padding: 30px 200px;input{ border:1px solid #76bd05; width:40rem;}li{ height 50px; list-style:none;}`;

Answer 1

发生这种情况是因为this.state.search最初是一个空字符串''。当您过滤您正在使用的产品时indexOf(this.state.search)，这将为每个产品返回 true，因为空字符串将匹配任何内容。

我只是在渲染函数中添加一个条件。如果this.state.search.length > 0则显示过滤后的产品。

{this.state.search.length > 0 && filteredProducts.map((product) => {

  return (

    <li>

      <Product product={product} key={product.title} />

    </li>

  );

})}