Reactでテーブルをフィルタリングする最良の方法

Question

私はreduxに格納されたオブジェクトの配列を持っています。私は、ユーザーの入力に基づいて配列をフィルタリングできるようにしたい。私は、小道具を介して配列を受け取り、その配列を変更する状態オブジェクトを作成すべきですか、または状態と小道具を混在させることは悪い習慣ですか？ 2つを混在させても問題ない場合は、componentWillReceivePropsに状態を設定する必要がありますか？

Answer 1

小道具に基づく建物の状態は多少複雑になる可能性がありますが、すべての選択肢を考慮する必要があります。

実装するのが最も簡単なのは、renderメソッドで小道具をフィルタリングすることです。

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

次のオプションが何をすべきかです：あなたはあまりにも多くの理由のために更新されませんし、リスト内の要素の数が少ない場合は特に、これは好ましい方法であるかもしれない十分に小さい部品を使用している場合あなたは記述しており、コンポーネントのフィルタ状態と渡された小道具に基づいて計算された状態を導出します。これは、多くの小道具を受け取り、頻繁にレンダリングされる複雑なコンポーネントを使用している場合に適しています。ここでは、表示可能な要素をキャッシュし、フィルタリングが必要なときにのみリストをフィルタリングします。

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

そして最後に、おそらくどこかconnect経由で渡されたコンポーネントの小道具としてアクションの作成者とfilterStrに合格する必要がありますReduxの「道」、。以下の実装では、ステートレスコンポーネントを使用しています。なぜなら、我々はコンポーネントの状態に全く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> 
) 
}