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

Question

我尝试了这个，甚至在输入要搜索的值之前，所有产品都会出现在搜索栏下方，如何仅在搜索时显示产品。请帮忙提前致谢

搜索栏.js

import 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) => {&nbsp; return (&nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; <Product product={product} key={product.title} />&nbsp; &nbsp; </li>&nbsp; );})}