陣營組件不上更新狀態

重新渲染我想你知道這更好的解決辦法：我有對象的數組和我的貓文件：陣營組件不上更新狀態

var categories = [ 
    { 
    "id": 1, 
    "name" : "Faktury", 
    "selected" : false 
    }, 
    { 
    "id": 2, 
    "name" : "Telefony", 
    "selected" : false 
    }, 
    { 
    "id": 3, 
    "name" : "Komputery", 
    "selected" : false 
    }, 
    { 
    "id": 4, 
    "name" : "Rachunkowośc", 
    "selected" : false 
    }, 
    { 
    "id": 5, 
    "name" : "Finanse", 
    "selected" : false 
    } 
];

和我有：

<ul className="category"> 
    {this.state.categories.map((item,index) => 
    <li onClick={()=>this.filterCategory(item,index)} key={item.id} className={item.selected? 'active' : ''}>{item.name}</li> 
)} 
</ul>

和我filterCategory：

filterCategory(item,index) { 
    this.state.categories[index].selected = !this.state.categories[index].selected; 
    this.forceUpdate(); 
}

不要ü知道我能做到不forceUpdate() ？我已閱讀棧我應該避免使用this.forceUpdate()

來源

2017-07-19 Paweł Baca

使用setState自動觸發重新呈現，所以不是直接突變狀態使用setState更新的狀態。

filterCategory(item,index){ 
    var categories = [...this.state.categories]; 
    categories[index].selected = !categories[index].selected; 
    this.setState({categories}) 
}

按照DOCS：

從來沒有直接發生變異this.state，如調用的setState（）之後可能代替您作出的突變。對待這個狀態，就好像它是不可變的。

來源

2017-07-19 10:16:40

感謝它的工作！ –

我認爲傳播運算符不會做深層複製，它仍然會有所有對象的引用並影響狀態值，運行下面的代碼：'let obj = [{a：1}，{a：2}] ; let k = [... obj]; k [0] .a = 10; console.log（k，obj）;'[**檢查此LINK **]（http://www.bambielli.com/til/2017-01-29-spread-operator-deep-copy/）正確我如果我失去了一些東西:) –

@MayankShukla你是事實正確。在Spread運算符文檔中也提到了這一點：注意：擴展語法在複製數組時有效地達到一級。因此，它可能不適合複製多維數組，如下面的示例 –

Do Not Modify State Directly

使用的setState方法狀態變化。

來源

2017-07-19 10:22:07

陣營組件不上更新狀態

回答

相關問題