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

你的過濾器需要更新的組件的狀態數組強制重新渲染。您不更新道具來強制重新渲染，道具更多的是初始數據或一致的數據，這些數據可以從頂層進行更新。

改變手柄功能，通過文本到filterList功能，並返回結果

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使用道具：

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

然後在使用狀態，而不是道具你的渲染：

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

首先，當我運行你的codepen的例子，我不是看到任何指示this.state.text未定義的錯誤。它不會篩選任何內容，但它顯示的值爲this.state.text。所以這個問題並不完全是你的問題所暗示的......

那麼如何讓這個東西過濾呢？基本上，使用ReactJS組件的想法是，與組件的當前狀態相關的所有內容都應位於this.state之內，並且基於該狀態顯示內容的任何決定都應在render方法中。請記住，只要使用setState方法更改狀態，就會觸發組件的重新渲染。

考慮到這一點，我會做一些事情，像這樣：

1. 您的組件通過array道具接收的照片列表（我可能會稱之爲別的東西，因爲它不是很描述性的，這是非常接近的Javascript保留字）

2. 該組件的狀態有一個值：text（再次，不是很描述）

3. 的組件具有handleChange輸入元素的處理程序。我會將它連接到輸入元素的onChange處理程序 - 不用擔心，每次輸入元素中的值發生更改時都會調用它。這應該是輸入元素上唯一的事件處理程序，所有應該做的是叫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> 
       ); 
   } 
   

就是這樣。這有兩個優點：

1. 它保持它的簡單 - 不維護任何狀態的this.state以外的成分，如果你只需要渲染，不維護它。

2. 它讓你的代碼更加清晰 - 我走近它的方式，你的分量只有兩個方法：handleChange和render

3. 它（應該）更高性能 - 陣營是在何時決定還不錯基於狀態變化進行渲染，當組件的狀態最小時，渲染效果會更好。 （我說「應該」是因爲我根本沒有測試過它）。