如何选中/取消选中react-native表组件中的单个复选框

Question

我正在处理示例应用程序。在那里我使用表组件来推动行，col值到一个空的数组。如果row，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（它们都指向内存中的同一个对象）。