Reagieren Sie filtern den Zustand, ohne es zu ruinieren

Question

Ich versuche, eine Suchfunktion zu machen, die den Namen der Personen rendert, die in einer Suchtexteingabe übereinstimmen.

Das Problem ist, dass ich den Status auf die Elemente setzen, die die Suche entsprechen, und dann der Anfangszustand verloren ist, so dass keine Suche mehr durchgeführt werden kann, da der Status leer sein wird. Wie kann ich den Zustand jedes Mal "auffüllen"?

Oder vielleicht gibt es einen anderen Weg, ohne tatsächlich den Zustand einzustellen, den ich nicht kenne.

Ich habe versucht, dies mit einem Versuch zu beheben, auf den Ausgangszustand zurückzusetzen, wenn die HandleSearch-Funktion direkt vor dem Filter aufgerufen wird, aber das funktioniert nicht.

import React from 'react'; 
import Header from './Header'; 
import peopleData from '../persons.json'; 

class App extends React.Component { 
    constructor(){ 
    super(); 
    this.handleSearch = this.handleSearch.bind(this); 
    this.state = { 
     people: peopleData 
    } 
    } 

    handleSearch(wordToMatch){ 
    this.setState({ people: peopleData }); //Attempt to reset to initial state 
    const result = this.state.people.filter(d => { 
     const regex = new RegExp(wordToMatch, 'gi'); 
     return d.Name.match(regex); 
    }); 
    this.setState({ people: result }) 
    } 

    render() { 
    const list = this.state.people.map((d, i) => <li key={i}>{d.Name}</li>); 
    return (
     <div className="myApp"> 
     <Header 
      tagline={"testing"} 
      handleSearch={this.handleSearch} 
     /> 
     <ul className="contentBody"> 
      {list} 
     </ul> 
     </div> 
    ) 
    } 
} 

export default App; 

Komponente mit der Sucheingabe:

import React from 'react'; 

class Header extends React.Component { 
    render() { 
    return (
     <header> 
     <input 
      type="text" 
      placeholder={this.props.tagline} 
      ref={(input) => this.searchInput = input} 
      onChange={() => this.props.handleSearch(this.searchInput.value)} 
     > 
     </input> 
     </header> 
    ) 
    } 
} 

export default Header; 

Wie kann ich meine Daten wie

[ 
    { 
    "Name": "Adam", 
    "Born": 1971 
    }, 

    { 
    "Name": "Bob", 
    "Born": 1999 
    }, 
etc etc for 20 more names 

Answer 1

Die Funktion setState aktualisiert das Zustandsobjekt nicht sofort. Wenn Sie also auf this.state.people verweisen, wird auf den Status vor dem Aufruf setState verwiesen. Sie können Ihren Code folgendermaßen aktualisieren:

handleSearch(wordToMatch) { 
    const result = peopleData.filter(d => { 
     const regex = new RegExp(wordToMatch, 'gi'); 
     return d.Name.match(regex); 
    }); 
    this.setState({ 
     people: result 
    }) 
} 

Answer 2

Im handleSearch der Staat für die searchString Variable aussieht. In der Rendermethode filtern Sie dann nicht einfach nur den Status, sondern Sie filtern zuerst die Personenliste, und dieses Ergebnis entspricht dem, was Sie zuordnen.

Wechsel:

const list = this.state.people.map((d, i) => <li key={i}>{d.Name}</li>); 

in diese:

const list = this.state.people.filter(d => { 
    const regex = new RegExp(this.state.searchString, 'gi'); 
    return d.Name.match(regex); 
}).map((d, i) => <li key={i}>{d.Name}</li>); 

Auf diese Weise wird die Liste in dem Zustand ist unverändert gelassen, und filtern Sie beim Rendern.