如何在本机表组件中选中/取消选中单个复选框

Question

I am working on sample application. In that I used the table component to push the row, col values into an empty array. If the row, col values exist in empty array it has to show the check mark and if user clicks(or) selects the checked one again it has to uncheck. Can anyone please suggest me how to resolve this issue? Any best solutions are appreciated.

_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()

  })

}

I used this _showdata function to show clickable action on each cell data

Answer 1

Try to avoid mutating the state. This is how you can add an item to the state without mutating it:

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

Notice that I didn't push the new data directly to the tableCellData array (which would be a state mutation), but instead I created a new tableCellData array. I then updated the state using the new array. There's a good reason for this.

If you mutate the state (like in the code you posted), then oldState.tableCellData === newState.tableCellData (they both point to the same object in memory).