搜索功能在 React 中无法始终如一地工作

Question

我使用 this API 创建了一个 React 应用程序，然后尝试添加搜索功能。一切正常，但有时我无法看到搜索结果。例如，如果您查看this screenshot，您将能够看到我想说的话。另外，我想忽略区分大小写，并希望得到确切的结果，而不管它的大小写。我尝试将搜索词和国家/地区转换为大写，但结果不正确。

App.js：

import React, { Component } from 'react'
import Result from './Result';
import Form from 'react-bootstrap/Form';


export default class App extends Component {
  constructor(){
    super();
    this.state = {
      data: [],
      searchText:'',
      searchResult:[],
      isSearch:false
    }
    this.onSearchChange=this.onSearchChange.bind(this);
   // this.fetchSearchResult=this.fetchSearchResult.bind(this);
  }

  onSearchChange= (e) =>{
    console.log("search change "+this.state.searchText)
    this.setState({
      searchText:e.target.value,
      isSearch:!this.state.isSearch
    })
    console.log("api data"+this.state.data)
  }

  /* fetchSearchResult= () =>{
    console.log(this.state.searchText)
    console.log("inside fetch")
   let store= this.state.data.map(item=>{
      let {country}=item
      return(country)
    })
    console.log(store)
    var areEqual = store.includes(this.state.searchText);
     console.log(this.state.areEqual)
     return (areEqual)? 
      store:'not matched'
  //  return store;

  } */

  componentDidMount() {
    const url =
    'https://corona.lmao.ninja/countries?sort=country'
    fetch(url)
      .then(result => result.json())
      .then(result => {
        this.setState({
          data: result,
        })
      })
  }
  render() {
    return (
      <div>

       <Form.Group>
       <Form.Label>Search</Form.Label>
        <Form.Control value={this.state.searchText}onChange={this.onSearchChange} type="text" placeholder="Enter country" />
      </Form.Group>
        <Result data={this.state.data} 
        toSearch={this.state.searchText} 
        searchCheck={this.state.isSearch}
        searchValue={this.state.searchText}/>
      </div>
    )
  }
}

结果.js

import React  from 'react'
import Table from 'react-bootstrap/Table';

const Result = (props) => {
    console.log('props value is:'+props.data)
    let {searchCheck, searchValue}=props;

   let update=props.data.reverse().map((item)=>{

    const { countryInfo, country, cases, deaths, recovered, active, casesPerOneMillion} = item;
    return(
    (searchCheck)?country.includes(searchValue)?
        <tbody>
        <tr key={countryInfo._id}>
          <td><img style={{height:'25px',width:'50px'}}src={countryInfo.flag}/></td>
         <td>{country}</td>
          <td>{cases}</td>
          <td>{active}</td>
          <td>{recovered}</td>
          <th>{casesPerOneMillion}</th>
          <td>{deaths}</td>
        </tr>
      </tbody>:
      '':
      <tbody>
        <tr key={countryInfo._id}>
          <td><img style={{height:'25px',width:'50px'}}src={countryInfo.flag}/></td>
         <td>{country}</td>
          <td>{cases}</td>
          <td>{active}</td>
          <td>{recovered}</td>
          <th>{casesPerOneMillion}</th>
          <td>{deaths}</td>
        </tr>
      </tbody>
    )  
    })
    return (
      <div>
          <Table striped bordered hover variant="dark">
          <thead>
        <tr>

          <th>Flag</th>
          <th>Country</th>
          <th>Cases</th>
          <th>Active</th>
          <th>Recovered</th>
          <th>Cases per one Million</th>
          <th>Deaths</th>


        </tr>
      </thead>
          {update}
          </Table>
      </div>
    )
  }
export default Result;

Sandbox link

Answer 1

问题在于您的 onSearchChange 函数。对于输入字段中的每个 onchange，您都在尝试重置 isSearch 状态。因此，搜索以奇数间隔变为错误，导致不过滤搜索结果。因此，尽管搜索框中有一些搜索词，但您会看到整个国家/地区列表。你根本不需要那个 isSearch 。如果搜索框中有任何文本，则进行过滤，否则将显示整个列表。

这是一个工作演示 - https://codesandbox.io/s/cool-poitras-tuu55

希望这会有所帮助！