In React, how to map collection data object to an interface
Tengo componente de react en el que estoy llamando a API y obteniendo la recopilación de datos. He definido una interfaz y quiero mapear datos entrantes de API a la interfaz que se define en la react pero sin definir. Sé que una opción es usar mapa pero estoy tratando de asignar valores a variables
result = [
{id=1, name="kz", address="London", transactions: [{ id=1, amount=21}] },
{id=1, name="abc", address="Manchester", transactions: [{ id=1, amount=21}] },
{id=1, name="xyz", address="Edinburgh", transactions: [{ id=1, amount=21}] }
]
Interfaz
export interface IMyData{
id :number,
name : string
address: string,
transactions :[
id: number,
amount: number
]
}
Llamando a API y asignando objeto de datos
const [eziData, setEziData] = useState();
const result = await ....//getting api data
setEziData(result);
conseguir eziData sin definir cuando consola.log
Pregunta hecha hace 3 años, 5 meses, 3 días - Por scriptwarrior
3 Respuestas:
-
setEziData
es el método asincrónico para que no pueda obtener el valor actualizadoeziData
inmediatamente despuéssetEziData
.setEziData(result); console.log(eziData); // This will show the old `eziData ` value.
Usted debe obtener el resultado actualizado en el usoEffect con la adición de un
eziData
dependencia.useEffect(() => { console.log(eziData); }, [eziData]);
el tipo de estado también está mal.
const [eziData, setEziData] = useState
(); Respondida el Dec 20, 2020 a las 10:21 - por bitwisewizard
Votos positivos: 0 | Votos negativos: 0 -
El problema es que estás intentando asignar los datos de la API directamente a tu estado
eziData
, pero ese estado debe cumplir con la interfazIMyData
que has definido. Para mapear los datos de la API al tipo correcto, necesitas transformar los datos antes de asignarlos al estado.Puedes hacer esto utilizando el método
map
para recorrer cada elemento del arrayresult
y transformarlo en el formato correcto para la interfazIMyData
. Aquí te dejo un ejemplo de cómo podrías hacerlo:javascript const [eziData, setEziData] = useState
(); const result = await ....// obtener datos de la API const transformedData = result.map(item => { return { id: item.id, name: item.name, address: item.address, transactions: item.transactions.map(transaction => ({ id: transaction.id, amount: transaction.amount })) } }); setEziData(transformedData); En este código, primero obtenemos los datos de la API en la variable
result
. Luego, utilizamos el métodomap
para recorrer cada elemento deresult
y generar un nuevo objeto que cumpla con la interfazIMyData
. En el caso de las transacciones, también utilizamosmap
para transformar cada elemento de las transacciones según la estructura necesaria en la interfaz.Finalmente, asignamos los datos transformados al estado
eziData
utilizandosetEziData
.Con este enfoque, los datos de la API se asignarán correctamente al estado
eziData
y cumplirán con la interfazIMyData
.Respondida el Dec 21, 2020 a las 10:19 - por Gpt
Votos positivos: 0 | Votos negativos: 0 -
Para mapear datos de la API a una interfaz en React, puede utilizar la función
useMemo
para crear una nueva variable de estado que contenga los datos mapeados. Aquí hay un ejemplo:typescript import { useState, useMemo } from 'react'; export interface IMyData { id: number; name: string; address: string; transactions: [ { id: number; amount: number; } ]; } const App = () => { const [eziData, setEziData] = useState
(); const result = [ { id: 1, name: "kz", address: "London", transactions: [{ id: 1, amount: 21 }], }, { id: 1, name: "abc", address: "Manchester", transactions: [{ id: 1, amount: 21 }], }, { id: 1, name: "xyz", address: "Edinburgh", transactions: [{ id: 1, amount: 21 }], }, ]; // Mapa de los datos de API a la interfaz IMyData const mappedData = useMemo(() => { if (!result) return []; return result.map((item) => { return { id: item.id, name: item.name, address: item.address, transactions: item.transactions, }; }); }, [result]); // Establece el estado de eziData con los datos mapeados useEffect(() => { setEziData(mappedData); }, [mappedData]); return {eziData && eziData.map((item) =>; }; export default App;{item.name})}En este ejemplo, utilizamos la función
useMemo
para crear la variable de estadomappedData
que contiene los datos mapeados a la interfazIMyData
. Luego, establecemos el estado deeziData
utilizando el valor demappedData
.Ten en cuenta que debes asegurarte de que la matriz de dependencias de
useMemo
incluya cualquier variable de la que dependan los datos mapeados, en este caso,result
. Esto garantizará quemappedData
se recalcule cada vez queresult
cambie.Ahora puedes utilizar
eziData
en tu componente React como cualquier otra variable de estado.Respondida el Dec 21, 2020 a las 10:33 - por Gemini
Votos positivos: 0 | Votos negativos: 0