Estoy tratando de cambiar su valor cuando haces clic en una casilla de verificación. Pero por alguna razón, los cambios no se vuelven a representar. ¿por qué?

ingrese la descripción de la imagen aquí

datos de muestra (props.data):

{ "school": { "checkDocuments": [ { 'label': 'license', 'check': false }, { 'label': 'identification', 'check': false }, { 'label': 'phone', 'check': false }, ], "section": "escuela" }, "collage": { "checkDocuments": [ { 'label': 'license', 'check': false } ], "section": "universidad" } 

este es mi componente:

 export const Verificardocuments = props ={amp}gt; { const [documents, setDocuments] = useState(props.data); updateDataDocument = (section, index) ={amp}gt; { console.log(section, index); documents[section].checkDocuments[index].check = !documents[section].checkDocuments[index].check; setDocuments(documents); } return {amp}lt;List{amp}gt; { /* escuela,universidad ={amp}gt; "section" key */ Object.keys(documents).map((section, i) ={amp}gt; { return ( {amp}lt;View key={i}{amp}gt; {amp}lt;ListItem itemDivider {amp}gt; {amp}lt;Text{amp}gt;{documents[section].section}{amp}lt;/Text{amp}gt; {amp}lt;/ListItem{amp}gt; {documents[section].checkDocuments.map((document, j) ={amp}gt; { return ( {amp}lt;ListItem onPress={() ={amp}gt; updateDataDocument(section, j)} key={j} {amp}gt; {amp}lt;CheckBox checked={document.check} color="blue" /{amp}gt; {amp}lt;Body{amp}gt; {amp}lt;Text{amp}gt;{document.label}{amp}lt;/Text{amp}gt; {amp}lt;/Body{amp}gt; {amp}lt;/ListItem{amp}gt;) })} {amp}lt;/View{amp}gt; ) }) } {amp}lt;/List{amp}gt; } 

No estoy seguro de si estoy haciendo la mejor manera de actualizar un elemento contenido en mi matriz.

Aquí hay una forma de hacerlo.

Dado que su estructura de datos es algo compleja / grande, debe crear una copia para cada objeto anidado o matriz dentro. Una vez hecho esto, puede actualizar la copia de forma segura sin cambiar también la variable original (el estado). Luego, con la copia actualizada a cómo desea que sea el nuevo estado, simplemente úsela para establecer el nuevo estado.

 updateDataDocument = (section, index) ={amp}gt; { const obj = {...documents}; // Copy the documents object const arr = [...obj[section].checkDocuments] // Copy the checkDocuments array const item = {...arr[index]} // Copy the item inside the array item.check = !item.check; // Change the value arr[index] = item; obj[section].checkDocuments = arr; setDocuments(obj); } 

Otra forma, que efectivamente es lo mismo, es cómo lo hizo @AsafAviv.

Las actualizaciones de estado en los componentes de la función deben ser inmutables.

Se recomienda usar el patrón de devolución de llamada al actualizar objetos dentro del estado y extender cada objeto para evitar perder el resto de las propiedades

 updateDataDocument = (section, index) ={amp}gt; { setDocuments(prevState ={amp}gt; ({ // spread the previous state into a new object ...prevState, [section]: { // also spread prevState[section] into a new object ...prevState[section], // create a new array of checkDocuments checkDocuments: prevState[section].checkDocuments.map((doc, i) ={amp}gt; i === index ? // when we find the object we need to update, // spread it into a new object and then update // the check property { ...doc, check: !doc.check } : doc ), }, })) } 

Las actualizaciones inmutables anidadas son feas y podría ser mejor introducir una biblioteca inmutable que lo maneje por usted, como immer, que tiene una versión de ganchos que le permite actualizar el estado de manera mutable

 import { useImmer } from 'use-immer' export const Verificardocuments = props ={amp}gt; { const [documents, setDocuments] = useImmer(props.data); const updateDataDocument = (section, index) ={amp}gt; { setDocuments(draft ={amp}gt; { const prevChecked = draft[section].checkDocuments[index].check draft[section].checkDocuments[index].check = !prevChecked }) } return ... } 

documents están siendo mutados, por eso no activa el re-renderizado. así que aconsejo asignarlo a una copia local y hacer la mutación allí

 updateDataDocument = (section, index) ={amp}gt; { const newDoc = documents newDoc[section].checkDocuments[index].check = !newDoc[section].checkDocuments[index].check; setDocuments(newDoc) }