Passer le tableau au composant

Question

Je suis nouveau sur React et j'ai besoin d'aide pour les éléments suivants..

J'ai un composant qui accepte une liste de tableaux pour restituer le composant et j'ai besoin d'un composant séparé pour manipuler le tableau

Composant rendu :

export function DashboardContent() {
    retour (
        <Grille>
            <Grid.Col sm={12} md={12} lg={4}>
                <Carte de profil />
            </Grille.Col>
            <Grid.Col sm={12} md={12} lg={8}>
                <Flex direction="colonne" h="100%" justifier="espace-entre" écart="md">
                    <Carte de bienvenue />
                    <StatsGroup data={mockData} />
                </Flex>
            </Grille.Col>
            <Grid.Col sm={12} md={12} lg={8}>
                <BalanceCard />
            </Grille.Col>
            <Grid.Col sm={12} md={12} lg={4}>
                <OverviewCard />
            </Grille.Col>
        </Grille>
    );
}</pré>
<p>mockData est l'endroit où je dois transmettre le tableau via l'appel API
Transmission actuellement des données de simulation suivantes : </p>
<pre class="brush:php;toolbar:false;">export const mockData = [
    {
        titre : 'ABC',
        valeur : « 7 999 $ »,
        différence : 50,
    },
    {
        titre : 'XXX',
        valeur : '$4,00',
        diff : -13,
    },
    {
        titre : 'Nul',
        valeur : '0,745$',
        différence : 1,
    },
];≪/pré>
<p>Besoin de l'aide d'un nouveau composant js capable de gérer et d'effectuer indépendamment des appels d'API et de transmettre des tableaux au format décrit dans la simulation.</p>
<p>J'ai essayé le code suivant sans succès, toute aide serait grandement appréciée</p>
<pre class="brush:php;toolbar:false;">importer React, { useEffect, useState } depuis 'react';
importer des axios depuis 'axios' ;

interface Tableau personnalisé {
    titre : chaîne ;
    valeur : chaîne ;
    diff : nombre ;
}
jeton const =
    'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';

const axiosInstance = axios.create({
    en-têtes : {
        Autorisation : `Bearer ${token}`,
    },
});
const Utilisation = () =>
    const [utilisateurs, setUsers] = useState([]);

    const fetchUsers = async () =>
        réponse const = attendre axios.get(
            'https://myrestservices.com/api/v2/organizations/AXZ/usage'
        );
        const usersData = réponse.data;

        const usersArray = usersData.map(user => ({
            titre : utilisateur.titre,
            valeur : utilisateur.valeur,
            diff : utilisateur.diff,
        }));

        setUsers(usersArray);
    } ;

    useEffect(() => {
        fetchUsers();
    }, []);

    revenir aux utilisateurs ;
} ;

exporter l'utilisation par défaut ;

Answer 1

La première chose que vous devez faire est de modifier l'implémentation de Usage en quelque chose de similaire pour réagir aux hooks personnalisés

const useApiData = (apiUrl) => {
  const [data, setData] = useState([]);

  const fetchData = async () => {
    try {
      const response = await axios.get(apiUrl);
      const responseData = response.data;

      const dataArray = responseData.map(item => ({
        title: item.title,
        value: item.value,
        diff: item.diff,
      }));

      setData(dataArray);
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

  useEffect(() => {
    fetchData();
  }, [apiUrl]);

  return data;
};

export default useApiData;

Apportez ensuite les modifications suivantes dans le composant StatsGroup pour restituer ces données.

const StatsGroup = ({ apiData }) => {
  return (
    <div>
      {apiData.map(item => (
        <div key={item.title}>
          <p>Title: {item.title}</p>
          <p>Value: {item.value}</p>
          <p>Diff: {item.diff}</p>
        </div>
      ))}
    </div>
  );
};

export default StatsGroup;

Donc, pour établir un lien entre un hook personnalisé et un composant StatGroup, appelez d'abord le hook personnalisé, puis après avoir obtenu le résultat, transmettez les données à l'accessoire du composant StatGroup comme indiqué ci-dessous.

const DashboardContent = () => {
  // 使用您想要从中获取数据的任何API URL
  const apiUrl = 'https://myrestservices.com/api/v2/organizations/AXZ/usage';
  
  const apiData = useApiData(apiUrl);

  return (
    <div>
      <h1>Stats Group</h1>
      <StatsGroup apiData={apiData} />
    </div>
  );
};

export default DashboardContent;