Come filtrare la raccolta dati in ReactJS

Question

Sono nuovo di ReactJS e sto cercando di capire come funziona.

stavo giocando con un po 'di JsBin e ho creato con successo alcuni componenti per recuperare i dati da un api ... ma, mi sentivo un po' confuso quando ho provato implementare il codice per filtrare che la raccolta .

Ecco lo JsBin link che stavo cercando di implementare la funzione di filtro.

Potresti aiutarmi a capire perché non funziona? Grazie.

Answer 1

Nel componente ContentList, è necessario utilizzare this.props.filterText che prenderà il valore dell'input e confronterà i dati. Quando il valore di input viene modificato, React esegue nuovamente il rendering del componente che contiene this.state.filterText. È possibile utilizzare il metodo map o filter per filtrarlo. Ecco un esempio:

var ContentList = React.createClass({ 

    render: function() { 
     var commentNodes = this.props.data.map(function(content) { 
       if(content.description === this.props.filterText){ <-- this makes the filter work ! 
        return <ItemRow title={content.owner.login} body={content.description} slug={content.owner.avatar_url}></ItemRow>} 
      }) 
     return (
      <div className='contentList'> 
       {commentNodes} 
      </div> 
     ) 
    } 
})