Comment cocher/décocher chaque case à cocher dans le composant reac-native Table

Question

Je travaille sur un exemple d'application. En ce que j'ai utilisé le composant de table pour pousser la ligne, col valeurs dans un tableau vide. Si la ligne, col valeurs existent dans le tableau vide, il doit afficher la coche et si l'utilisateur clique (ou) sélectionne à nouveau le coché il doit décocher. Quelqu'un peut-il me suggérer comment résoudre ce problème? Toutes les meilleures solutions sont appréciées.

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

    }) 

} 

J'ai utilisé cette fonction _showdata pour montrer l'action cliquable sur chaque donnée de cellules

Answer 1

Essayez d'éviter l'état muter. Voici comment vous pouvez ajouter un élément à l'état sans muter il:

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

Notez que je n'ai pas poussé les nouvelles données directement au tableau tableCellData (ce qui serait une mutation de l'État), mais j'ai créé un nouveau tableau tableCellData. J'ai ensuite mis à jour l'état en utilisant le nouveau tableau. Il y a une bonne raison à cela.

Si vous mutez l'état (comme dans le code que vous avez publié), alors oldState.tableCellData === newState.tableCellData (ils pointent tous deux vers le même objet en mémoire).