過濾功能不反應在迴應

Question

我已經建立一個頁面，它從服務器獲得一個對象數組的列表，我有幾個複選框作爲過濾器，用戶將檢查或取消選中複選框，我將不得不篩選列表，但我有問題現在重新列表。以下是我的部分代碼。

filterItem() => { 
    // logic goes here 
    console.log(filteredItems) 

} 

renderItems (items) => { 
    return(
    //map logic goes here 
) 
} 

render(){ 
    return(
     {this.renderItems(this.props.item)} 
    ) 
} 

我怎麼能重新描繪通過將filteredItems作爲參數去它renderItems功能？我試過this.renderItems(filteredItems)，但沒有看到我的清單得到更新。

Answer 1

可以在組件

constructor(){ 
    super(); 
    this.state = { 
     items: this.props.items 
    } 
} 

的狀態設定items與{this.renderItems(this.state.items)}渲染。如果我清楚地瞭解你，並且當用戶單擊複選框時，你可以過濾並更改你的陣列，只需要setState這個新陣列，並且你的組件將會自我渲染。

Answer 2

組件的道具或狀態不會改變，所以你的組件不會被重新渲染。您可能想要使用狀態（請參閱文檔here）來存儲數據並相應地進行更改，以便組件重新呈現。

Answer 3

https://facebook.github.io/react/docs/react-component.html

的更新可以通過改變道具或狀態引起的。

你沒有做任何