Najlepszy sposób filtrowania tabeli w React

Question

Mam tablicę obiektów przechowywanych w redux. Chcę móc filtrować tę tablicę na podstawie danych wprowadzanych przez użytkownika. Czy powinienem utworzyć obiekt stanu, który odbiera tablicę za pomocą rekwizytów i modyfikuje tę tablicę, czy też jest to zła praktyka mieszania stanu i rekwizytów? Jeśli dobrze jest zmieszać te dwa, czy powinienem ustawić stan w componentWillReceiveProps?

Answer 1

Stan budowy oparty na rekwizytach może być nieco skomplikowany, co jest dopuszczalne, ale należy wziąć pod uwagę wszystkie opcje.

Najprostszym rozwiązaniem jest filtrowanie rekwizytów w metodzie render. Jeśli masz wystarczająco małe elementy, które nie są aktualizowane przez zbyt wielu powodów, a zwłaszcza wtedy, gdy liczba elementów na liście jest niska, to może być korzystna metoda:

class FilterList extends React.Component { 
    render() { 
    const { elements } = this.props; 
    const { filterStr } = this.state; 

    const filteredElements = elements 
     .filter(e => e.includes(filterStr)) 
     .map(e => <li>{ e }</li>) 

    return (
     <div> 
     <input 
      type="text" 
      value={ filterStr } 
      onChange={ e => this.setState({ filterStr: e.target.value }) } /> 
     <ul> 
      { filteredElements } 
     </ul> 
     </div> 
    ); 
    } 
} 

Kolejnym rozwiązaniem jest to, co opisujesz i wyprowadzasz stan obliczony na podstawie stanu filtra komponentu i rekwizytów przekazanych do niego. Jest to dobre, gdy masz skomplikowany komponent, który otrzymuje wiele rekwizytów i jest często renderowany. Tutaj buforujesz widoczne elementy i filtrujesz listę tylko wtedy, gdy trzeba ją odfiltrować.

class FilterList extends React.Component { 
    constructor (props) { 
    this.state = { 
     viewableEls: props.elements 
    } 
    } 

    componentWillReceiveProps (nextProps) { 
    const { elements } = this.props; 
    const { filterStr } = this.state; 

    if (elements !== nextProps.elements) { 
     this.setState({ 
     viewableEls: this.getViewableEls(nextProps.elements, filterStr) 
     }) 
    } 
    } 

    getViewableEls (elements, filterStr) { 
    return elements.filter(el => el.includes(filterStr)) 
    } 

    handleFilterChange = e => { 
    const { elements } = this.props; 

    this.setState({ 
     filterStr: e.target.value, 
     viewableEls: this.getViewableEls(elements, filterStr) 
    }) 
    } 
    render() { 
    const { viewableEls } = this.state; 

    return (
     <div> 
     <input 
      type="text" 
      value={ filterStr } 
      onChange={ e => this.setState({ filterStr: e.target.value }) } /> 
     <ul> 
      { viewableEls.map(e => <li key={ e }>{ e }</li>) } 
     </ul> 
     </div> 
    ); 
    } 
} 

I wreszcie, Redux „droga”, która wymaga, aby przekazać twórcy działania i filterStr jako rekwizyty do komponentu, prawdopodobnie został przekazany connect gdzieś indziej. Poniższa implementacja używa składnika bezstanowego, ponieważ nie zachowujemy w ogóle stanu komponentu fitlerStr.

const FilterTable = ({ elements, filterStr, changeFilterStr }) => { 
    return (
    <div> 
     <input 
     type="text" 
     value={ filterStr } 
     onChange={ e => changeFilterStr(e.target.value) } /> 
     <ul> 
     { 
      elements 
      .filter(e => e.includes(filterStr)) 
      .map(e => <li key={ e }>{ e }</li>) 
     } 
     </ul> 
    </div> 
) 
}