Envío una solicitud GET y en respuesta obtengo un objeto de usuario como este:
{ name: 'Alex', email: 'test@test.com', age: 18, }luego necesito establecer este objeto en el estado y representar datos en algunos componentes diferentes
interface User { name: string | null, email: string, age: number, } const [user, setUser] = useState<User>(); const getUser = async () => { const response = await API.getUserData(); setUser(response); } catch (error) { console.log(error) }El problema: por alguna razón, el nombre puede ser nulo y, en este caso, debería mostrar los valores predeterminados de una página. Que yo sepa se puede hacer de muchas maneras. La más obvia es con sentencias condicionales como esta:
<h1>{name ? name : 'Default value'}</h1> or <h1>{name ?? 'Default value'}</h1>Pero para mí es una mala opción porque hay demasiadas condiciones en muchos componentes. ¿Hay alguna manera de establecer valores predeterminados en la función getUser? Eventualmente quiero que mis componentes sean así:
// if name is null then its equal to some default value otherwise it equals to the value from server. <h1>{name}</h1>Creo que una opción es transformar la respuesta antes de invocar setUser . Algo como esto
function transformUserData(userData) { // make transformation and replacement on Default Values } const getUser = async () => { const response = await API.getUserData(); const responseWithDefaultValues = transformUserData(response); setUser(responseWithDefaultValues); } catch (error) { console.log(error) }Sí, puede establecer sus valores predeterminados en useState :
const [user, setUser] = setState<User>({ name: "default value", email: "default email address", age: 0 })Luego, con las llamadas a la API, obtiene cambios.
Pero hay un problema si la respuesta de la API fue {name: null} , no vuelve al valor predeterminado. por lo que debe destruir su response y verificar los valores antes setUser :
const getUser = async () => { const response = await API.getUserData(); const {name, email, age} = response; setUser({name: name || "default value", email: email, age: age}); } catch (error) { console.log(error) }Como nota al margen:
La sintaxis adecuada para cortocircuito es:
<div> {name && 'Default value'} </div>