フィルタリストを作成しようとしているReactJs

Question

入力を入力してリストをフィルタリングするフィルタリストを作成しようとしています。しかし、if文がなぜ機能していないのか分かりません。ここで

は、私が書いた関数である： `

filterList (event) { 
    var updatedList = this.props.array; 
    var filterText = this.state.text; 
    updatedList = updatedList.filter(function(item){ 
     console.log(filterText); 
     if(item.name === filterText){ 
     console.log('check', item.name); 
     } 
    }); 

は、誰かがここで、この上で私を助けることができる私のcodepenへのリンクです：LINK

Answer 1

あなたのフィルタは、コンポーネントの状態で配列を更新する必要があります強制的に再レン​​ダリングします。再描画を強制するために小道具を更新するのではなく、小道具は最初のデータ用であるか、一番上から更新できる一貫したデータです。その後に小道具の代わりに状態を使用

getInitialState() { 
    return { text:'', array: this.props.array}; 
} 

：

変更ハンドル機能は小道具を使用する結果

handleChange(event) { 
    var array = this.filterList(event.target.value); 
    this.setState({ text: event.target.value, array: array }); 
}, 

filterList (filterText) { 
    var updatedList = this.props.array; 
    return updatedList.filter(function(item){ 
    return item.name === filterText; 
    }); 
} 

更新getInitialStateをfilterList関数にテキストを渡し、戻りますあなたのレンダリング：

var arrayComponents = this.state.array.map(function(photo) { 
    return <li className="photo photo-name">{photo.name} <img className="photo" src={photo.link}/></li>; 
}) 

Answer 2

まず、私がコードサンプルを実行すると、私はそうではありませんthis.state.textが未定義であることを示すエラーが表示されます。何もフィルタリングしていませんが、this.state.textという値が表示されています。だから問題はあなたの質問が示唆しているものではありません...

私たちはこのことをどのようにフィルタリングするのですか？基本的に、ReactJSコンポーネントのアイデアは、コンポーネントの現在の状態に関連するすべてがthis.stateでなければならず、その状態に基づいて何を表示するかについての決定はrenderメソッドでなければなりません。 setStateメソッドを使用して状態を変更すると、コンポーネントの再レンダリングがトリガーされることに注意してください。

1. コンポーネントが、それはとてもではないので、私はおそらく、何か他のものにそれを呼びたい（array小道具を経由して写真のリストを受け取りますことを念頭に、私はこのようなものを設定したいと

   text（再び、非常にわかりやすいない）

2. コンポーネントがを持っています記述し、それはJavascriptの予約語）

3. コンポーネントの状態にひどく近いのですが1つの値を持ちます入力要素のハンドラはです。これを入力要素のハンドラonChangeに接続します。入力要素の値が変更されるたびに呼び出されるため、心配はいりません。これは、入力要素上の唯一のイベントハンドラであるべきで、それが何をすべき全ては、renderメソッドでをフィルタリングリストを行うthis.setState({ text: event.target.value });

4. 呼んでいます。ここで重要なのは、フィルタリングされた写真のリストを保持する必要がないということです。あなたが行っていることは、レンダリングしているだけなので、必要な時にのみ行うようにしてください（あるいは、Reactが必要と考えるとrender方法）。それだ

   render() { 
       var myFilteredList = this.props.array.filter(function(item){ 
        console.log(filterText); 
        if(item.name === filterText){ 
         console.log('check', item.name); 
         return true; 
        } 
   
        return false; 
       }); 
   
       var arrayComponents = myFilteredList.map(function(photo) { 
        return <li className="photo photo-name">{photo.name} <img className="photo" src={photo.link}/></li>; 
       }); 
   
       return (
       <div> 
        <h1>Hello, {this.props.name}</h1> 
        <p>{this.state.text}</p> 
        <input type="text" onKeyUp={this.handleChange} /> 
        <ul> 
         {arrayComponents} 
        </ul> 
       </div> 
       ); 
   } 
   

：だからあなたのrenderメソッドは次のようになります。これは利点のカップルを持っている：

1. 、それはそれをシンプルに保つ - this.state外のコンポーネントのいずれかの状態を維持しないと、あなただけのレンダリングのためにそれを必要とする場合、すべてでそれを維持していません。

2. それはあなたのコードクリーナーを保つ - 私はそれに近づいてきた方法で、あなたのコンポーネントのみが2つのメソッドがあります。それはよりパフォーマンス（あるべき）handleChangeとrender

3. を - リアクトはときに決定でかなり良いです状態の変化に基づいてレンダリングし、コンポーネントの状態が最小限の場合はより良い傾向があります。 （私は "それは全くテストしていないので"と言います）。