Creé un estado de objetos en React, pero necesitaba aumentar otro objeto en el mismo estado. Sin embargo, no puedo usar la propiedad setState() porque causa una nueva representación (bucle infinito).
Mi estado:
const [testObject, setTestObject] = useState({ id: 0, telephone: 123, personalData: { name: '', alias: '', gender: '' } })El error:
Too many re-renders. React limits the number of renders to prevent an infinite loop.Traté de encontrar una solución para esto, pero no puedo resolverlo:
setTestObject({...testObject, personalData: { ...testObject, name: 'McDonnell DC-10' }})¿Dónde estoy equivocado?
Solo necesita especificar que está usando datos personales, está en la línea correcta.
setTestObject({...testObject, personalData: { ...testObject.personalData, name: 'McDonnell DC-10' }})Incluso puede usar el estado anterior como parámetro para un mejor rendimiento.
setTestObject(testObject => { return {...testObject, personalData: { ...testObject.personalData, name: 'McDonnell DC-10' }}})Lo que puede hacer para evitar el ciclo infinito es agregar el código dentro de useEffect() , como este:
useEffect(() => { setTestObject({ ...testObject, personalData: { ...testObject.personalData, name: 'McDonnell DC-10', }, }); }, []); También supongo que desea actualizar el name de la propiedad y no agregar todo el objeto nuevamente dentro de personalData , es por eso que necesita usar ...testObject.personalData