0
133
VistasActualizar objetos anidados en React Native usando setState
Estoy tratando de cambiar las propiedades de los objetos dentro de un objeto y tratando de agregar nuevas propiedades a estos objetos pero manteniendo los valores anteriores.
No puedo averiguar cómo obtener el objeto anidado correcto por índice, no por identificación porque la identificación puede ser diferente del índice .map.
Esto es lo que obtuve hasta ahora, los nombres de los objetos son solo para fines de prueba y tal vez el "updateNestedObject" se pueda ejecutar en el padre.
Gracias de antemano y disculpe si es una pregunta de novato.
Neval
import React, { useState } from 'react'; import { View, TextInput, Text, StyleSheet, Button, Alert } from 'react-native'; function ObjectScreen() { const [state, setState] = useState({ id: 1, name: 'Test Object', nested: [ { id: 1, title: 'Object 1', }, { id: 2, title: 'Object 1', } ] }); function editNested({nestedObject, index, setState}) { const updateNestedObject = () => { setState(prevState => ({ nested: [ ...prevState.nested, [prevState.nested[index].comment]: 'Test Comment', }, })); } return ( <View> <Text>{object.title}</Text> <TextInput style={styles.input} name="comment" onChangeText={updateNestedObject} /> </View> ); } return ( <> <Text>{state.name}</Text> { state.nested.map((nestedObject, key)=>{ return ( <editNested key={key} index={key} object={object} nestedObject={nestedObject}/> ) })} </> ) } const styles = StyleSheet.create({ container: {}, input: { height: 40, margin: 12, borderWidth: 1, padding: 10, }, }); export default ObjectScreen;2 Respuestas
Responde la pregunta0
Según la cola, puede actualizar la matriz anidada con el siguiente método
const updateNestedObject = (values, item, index) => { console.log('values', values); const tempMainObj = state; const tempArr = state.nested; tempArr[index].value = values; const updatedObj = { ...tempMainObj, nested: tempArr }; setState(updatedObj); };Ejemplo completo
import React, { useState } from 'react'; import { View, TextInput, Text, StyleSheet, Button, Alert } from 'react-native'; function ObjectScreen() { const [state, setState] = useState({ id: 1, name: 'Test Object', nested: [ { id: 1, title: 'Object 1', value: '', }, { id: 2, title: 'Object 1', value: '', }, ], }); const updateNestedObject = (values, item, index) => { console.log('values', values); const tempMainObj = state; const tempArr = state.nested; tempArr[index].value = values; const updatedObj = { ...tempMainObj, nested: tempArr }; setState(updatedObj); }; return ( <> <Text style={{ marginTop: 50 }}>{state.name}</Text> {state.nested.map((item, index) => { return ( <> <Text>{item.title}</Text> <TextInput value={item?.value} style={styles.input} name="comment" onChangeText={(values) => updateNestedObject(values, item, index)} /> </> ); })} </> ); } const styles = StyleSheet.create({ container: { marginTop: 50, }, input: { height: 40, margin: 12, borderWidth: 1, padding: 10, }, }); export default ObjectScreen;Exposición de bocadillos: ejemplo en vivo
0
Hubo algunos problemas:
El nombre del componente JSX
editNesteddebe comenzar con una letra mayúscula.Y el componente
editNesteddebe tener su propia función, no debe definirse dentro de otro componente que haya causado que suTextInputpierda el foco después de cada ciclo de procesamiento.La llamada
setStatedebe cambiarse como se muestra a continuación:
const updateNestedObject = (text) => { setState((prevState) => ({ ...prevState, nested: prevState.nested.map((item) => item.id === nestedObject.id ? { ...item, value: text } : item ) })); };Pruebe el siguiente código:
import React, { useState } from "react"; import { View, TextInput, Text, StyleSheet, Button, Alert } from "react-native"; function EditNested({ nestedObject, setState }) { const updateNestedObject = (text) => { setState((prevState) => ({ ...prevState, nested: prevState.nested.map((item) => item.id === nestedObject.id ? { ...item, value: text } : item ) })); }; return ( <View> <Text>{nestedObject.title}</Text> <TextInput style={styles.input} onChangeText={updateNestedObject} value={nestedObject.value} /> </View> ); } function ObjectScreen() { const [state, setState] = useState({ id: 1, name: "Test Object", nested: [ { id: 1, title: "Object 1", value: "" }, { id: 2, title: "Object 1", value: "" } ] }); console.log(state); return ( <> <Text>{state.name}</Text> {state.nested.map((nestedObject, key) => { return ( <EditNested key={key} nestedObject={nestedObject} setState={setState} /> ); })} </> ); } const styles = StyleSheet.create({ container: {}, input: { height: 40, margin: 12, borderWidth: 1, padding: 10 } }); export default ObjectScreen;Demostración de trabajo
