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, 4 meses, 25 días - Por scriptwarrior

3 Respuestas:

  • setEziData es el método asincrónico para que no pueda obtener el valor actualizado eziData inmediatamente después setEziData.

    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 interfaz IMyData 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 array result y transformarlo en el formato correcto para la interfaz IMyData. 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étodo map para recorrer cada elemento de result y generar un nuevo objeto que cumpla con la interfaz IMyData. En el caso de las transacciones, también utilizamos map para transformar cada elemento de las transacciones según la estructura necesaria en la interfaz.

    Finalmente, asignamos los datos transformados al estado eziData utilizando setEziData.

    Con este enfoque, los datos de la API se asignarán correctamente al estado eziData y cumplirán con la interfaz IMyData.

    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) => 
    {item.name}
    )}
    ;
};

export default App;

    En este ejemplo, utilizamos la función useMemo para crear la variable de estado mappedData que contiene los datos mapeados a la interfaz IMyData. Luego, establecemos el estado de eziData utilizando el valor de mappedData.

    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á que mappedData se recalcule cada vez que result 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