Я пытаюсь изменить его значение, когда вы нажимаете на флажок. Но по какой-то причине изменения не отображаются снова. Почему?

введите описание изображения здесь

пример данных (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" } 

это мой компонент:

 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; } 

Я не уверен, что делаю лучший способ обновить элемент, содержащийся в моем массиве.

Вот один из способов сделать это.

Поскольку ваша структура данных довольно сложная / большая, вам необходимо создать копию для каждого вложенного объекта или массива внутри. Как только это будет сделано, вы можете безопасно обновить копию, не изменяя также исходную переменную (состояние). Затем, когда копия обновляется до того, как вы хотите, чтобы новое состояние было, вы просто используете ее, чтобы установить новое состояние.

 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); } 

Другой способ, который фактически является тем же, заключается в том, как @AsafAviv сделал это.

Обновления состояний в компонентах функций должны быть неизменными.

Рекомендуется использовать шаблон обратного вызова при обновлении объектов внутри состояния и распространять каждый объект, чтобы не потерять остальные свойства

 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 ), }, })) } 

Вложенные неизменяемые обновления уродливы, и, возможно, было бы лучше представить неизменяемую библиотеку, которая будет обрабатывать ее для вас, например, immer, которая имеет версию ловушек, которая позволяет обновлять состояние изменяемым образом

 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 видоизменяются, поэтому не запускают повторную визуализацию. поэтому я советую назначить его локальной копии и сделать там мутацию

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