如何在本機表組件中選中/取消選中單個復選框

Question

我正在研究示例應用程序。 在這種情況下，我使用表組件將行，col值壓入一個空數組。 如果該行的col值存在於空數組中，則必須顯示復選標記，並且如果用戶單擊（或）再次選擇已選中的值，則必須取消選中該值。 誰能建議我如何解決此問題？ 任何最好的解決方案表示贊賞。

_showData = (data,i,j) => {

  this.setState({iValue:i,jValue:j},()=>{
    //this.fetchData()
        this.state.tableCellData.push({"i":i,"j":j})
        this.setState({isSelected:true,tableCellData:this.state.tableCellData},()=>{/*alert("array:"+JSON.stringify(this.state.tableCellData))*/})

        if(this.state.isSelected == true){
          this.setState({isSelected:false})
        }else{
          this.setState({isSelected:true})
        }

    this.state.tableCellData.map((item, index) => {
     if(item.i == i && item.j == j){
       this.state.tableCellData.splice(index,0)
       this.setState({isSelected:false})
       alert("splice:"+JSON.stringify(this.state.tableCellData))
     }
   })
  this.fetchData()

  })

}

我使用了此_showdata函數來顯示每個單元格數據上的可點擊操作

Answer 1

盡量避免改變狀態。 這樣可以將項目添加到狀態而無需對其進行更改：

this.setState({
    isSelected:true,
    tableCellData: [
        ...this.state.tableCellData, 
        {i, j}
    ]
});

請注意，我沒有將新數據直接推送到tableCellData數組（這將是狀態突變），而是創建了一個新的tableCellData數組。 然后，我使用新數組更新了狀態。 這是有充分的理由的。

如果oldState.tableCellData === newState.tableCellData狀態（如發布的代碼一樣），則oldState.tableCellData === newState.tableCellData （它們都指向內存中的同一對象）。