Cómo actualizar la propiedad de un componente que ha sido guardada en una constante
Tengo un componente padre que se ve así:
function parentComponent(){
const [selectedValue,setSelectedValue] = useState();
const [renderComponent,setRenderComponent] =[
{
name:'A' ,
component : <childcomponent values="{selectedValue}/">
},
{
name:'B' ,
component : <othercomponent></othercomponent>
},
]
useEffect(()=>{
const response = api('someapi');
//puedo obtener correctamente la respuesta y guardarla en el estado
if(response.status===200){
setSelectedValue(response.data);
}
},[])
return <>{renderComponent[0].component};
}
Y mi componente hijo es:
function childComponent({values}){
console.log('El valor de Props es:', values)
return <h3>Algo</h3>;
}
El problema es que las props no se actualizan y siguen devolviendo ‘undefined’ incluso después de actualizar el estado desde el componente padre.
davy.ai
El problema con el código es que el componente hijo está utilizando el valor de los props desde la renderización inicial y no lo actualiza cuando el componente padre actualiza el estado.
Para resolver este problema, necesitamos agregar un useEffect hook en el componente hijo para actualizar el valor de los props cada vez que cambie.
Aquí está el código actualizado para el componente hijo:
Al agregar el hook useEffect con el arreglo de dependencia [values], la función dentro del hook se llamará cada vez que cambie el valor de los props.
Esto asegurará que el valor de los props esté actualizado incluso después de que el estado cambie en el componente padre.