状態をフィルタリングせずにフィルタリングして反応させない

Question

検索テキスト入力で一致する人物の名前を表示する検索機能を作成しようとしています。

問題は、検索に一致する項目に状態を設定した後、最初の状態が失われて状態が空になるため、これ以上検索できなくなることです。だから、毎回どのように状態を「補充」するのですか？

実際に認識していない状態を実際に設定することなく、他の方法があるかもしれません。

フィルタの直前でhandleSearch関数が呼び出されても初期状態にリセットしようとしましたが、これはうまくいきませんでした。

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; 

コンポーネント検索入力と：私のデータはhandleSearchで

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

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

Answer 1

setState関数は、直ちに状態オブジェクトを更新しません。したがって、this.state.peopleを参照すると、setStateコールの前の状態を参照します。コードを次のように更新できます。

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

Answer 2

どのように見えるか

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; 

はsearchString変数の状態を設定します。レンダリングメソッドでは、単純に状態をマッピングするのではなく、最初にpeopleリストをフィルタリングし、その結果をマップします。

変更：この中

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

：

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>); 

この方法では、状態のリストが変更されないと、レンダリング時に、あなたはフィルタリング。