Фильтр поиска не работает в React.js

Question

это 1-й компонент как index.jsx

это массив, который содержит все данные.

let details=[{ 
    id:'1', 
    website: 'amazon', 
    username:'harry', 
    password: '1234' 
    }, 
{ 
    id:'2', 
website: 'flipkart', 
username:'nowag', 
password: 'gfjh' 
}, 
{ 
    id:'3', 
website: 'skype', 
username:'king', 
password: 'yesyes' 

}, 
{ 
    id:'4', 
website: 'facebook', 
username:'deep', 
password: 'hellohello' 

    }]; 

класс приложение начинается здесь

class App extends React.Component{ 

constructor(props) { 
    super(props); 
    this.state= { 
     filter: null 
    }; 
} 

setFilter(filter) { 
    this.setState({filter: filter}) 
    } 

     render(){ 

ошибка здесь, что "Не удается прочитать свойство 'фильтр' неопределенных"

 let filteredPassword = this.props.details.filter(
      (detail) =>{ 
       return detail.website.toLowerCase().indexOf(this.state.search)!= -1; 
      } 
    ); 

     return (

     <ul> 
      <Filter onUpdateFilter={this.setFilter} /> 
      { 
       filteredPassword.map((detail)=>{ 
       return <Detail item={detail} key={detail.id} /> 
      })} 

     </ul> 

     ) 
     } 
    } 



     export default App; 

теперь есть еще один компонент filter.jsx

class Filter extends React.Component{ 

    constructor(props) { 
    super(); 
    this.state= { 
     search:'Search' 
    }; 
    } 



    updateSearch(event) { 
     this.setState({search: event.target.value.substr(0,40)}); 
     //this.props.onUpdateFilter(event.target.value.substr(0,40)) 
    } 

    render() { 

    return (
     <div> 
      <input type="text" defaultValue={this.state.search} onchange={this.updateSearch.bind(this)}/> 
     </div> 
    ) 
    } 
    } 

это w ау, который я пытался запустить свой фильтр, но он не работает

Answer 1

Это то, что ваш код должен выглядеть следующим образом:

class App extends React.Component{ 

constructor(props) { 
    super(props); 
    this.state= { 
     filter: null 
    }; 
    this.setFilter = this.setFilter.bind(this); 
} 

setFilter(filter) { 
    this.setState({filter: filter}) 
    } 

     render(){ 
     let filteredPassword = this.props.details.filter(
      (detail) =>{ 
       return detail.website.toLowerCase().indexOf(this.state.search)!= -1; 
      } 
    ); 

     return (

     <ul> 
      <Filter onUpdateFilter={this.setFilter} /> 
      { 
       filteredPassword.map((detail)=>{ 
       return <Detail item={detail} key={detail.id} /> 
      })} 

     </ul> 

     ) 
     } 
    } 



     export default App; 


class Filter extends React.Component{ 

    constructor(props) { 
    super(props); 
    } 

    updateSearch(event) { 
     this.props.onUpdateFilter(event.target.value.substr(0,40)) 
    } 

    render() { 

    return (
     <div> 
      <input type="text" defaultValue="Search" onchange={this.updateSearch.bind(this)}/> 
     </div> 
    ) 
    } 
    } 

Answer 2

Если вы не сдадите details к компоненту, вам нужно заменить this.props.details на details

---

И заменить это, потому что setFilter имеет неправильный контекст

<Filter onUpdateFilter={this.setFilter} /> 

к этому:

<Filter onUpdateFilter={filter => this.setFilter(filter)} /> 

или связываются в конструкторе:

constructor(props) { 
    super(props); 
    this.state= { 
     filter: null 
    }; 

    this.setFilter = this.setFilter.bind(this) 
}