Réagir Valeur de l'état multidimensionnel de la mise à jour native à la presse du commutateur

Question

Fondamentalement, j'ai une liste de niveaux d'accès. Je les ai mis dans une liste et à droite de chaque élément de la liste, j'ai un commutateur. Ce que j'essaye de réaliser est d'avoir l'événement onPress pour mettre à jour mon état où la clé est de l'article de liste qui a été pressé.

Section des données de la liste. Je n'ai aucun contrôle sur les noms des clés. Désolé pour ça.

accessList: 
Array(51) 
0: 
{FormID: 101, FormName: "ApplicationSettingCheckStoreID", FormDesc: "Activate Device", IsShow: true, Note: "ApplicationSettingCheckStoreID"} 
1: 
{FormID: 145, FormName: "GiftCardAddFundList", FormDesc: "Add Fund", IsShow: true, Note: "Add Fund"} 

La façon dont je le rendent

<List> 
    { 
     this.state.accessList.map((v, k) => { 
      return (
       <ListItem key={v.FormID}> 
        <Row> 
        <Col size={80}> 
         <Text>{v.FormDesc}</Text> 
        </Col> 
        <Col size={20}> 
         <Switch 
          value={v.IsShow} 
          onValueChange={() => this._switchToggled(v)} /> 
         </Col> 
        </Row> 
       </ListItem> 
      ); 
     }) 
    } 
    </List> 

c'est la partie que je suis en train de remplir correctement mais j'ai échoué à plusieurs reprises.

_switchToggled = (listItem) => { 
     ... 
    } 

J'apprécierais vraiment toute aide. Je vous remercie. Qu'est-ce que vous utilisez pour la gestion de l'état, c'est-à-dire comment votre collection accessList est-elle stockée?

Answer 1

Si elle vient de redux, vous pouvez passer une action avec l'indice de l'élément que vous souhaitez mettre à jour comme ceci:

_switchToggled = (listItem, index) => { 

    this.props.dispatch(actions.updateToggle({ index, IsShow: !listItem.isShow }); 
} 

Votre fichier actions.js ressemblerait à quelque chose comme ceci:

const updateToggle = (payload) => { 
    return { 
    type: "UPDATE_TOGGLE", 
    payload 
    }; 
}; 

Votre reducer serait ressembler à quelque chose comme ceci:

const reducer = (state, action) => { 
    case "UPDATE_TOGGLE": 

    // create a copy of the data 
    let clone = state.accessList.slice(); 

    // mutate the single item 
    let item = clone[action.payload.index]; 

    let newItem = { 
     ...item, 
     IsShow: action.payload.isShow 
    }; 

    // splice it into the clone 
    let newAccessList = clone.splice(action.payload.index, 1, newItem); 

    return { 
     ...state, 
     accessList: clone 
    }; 

    default: 
    return state; 
}; 

Donc dans votre réducteur vous faites réellement une copie de votre structure de données pour fonctionner. Cela conserve le principe selon lequel Redux ne doit jamais muter directement state mais plutôt retourner une nouvelle représentation de state. Avoir accès aux index de votre tableau accessList est utile et vous permet d'effectuer le splice et renvoyer l'article avec son état isShow mis à jour. Faites-moi savoir si je peux vous aider plus avec cet exemple.