recherche

Maison  >  Questions et réponses  >  le corps du texte

Passer le tableau au composant

<p>Je suis nouveau sur React et j'ai besoin d'aide pour les éléments suivants..</p> <p>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</p> <p>Composant rendu : </p> <pre class="brush:php;toolbar:false;">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 ;</pre> <p><br /></p>
P粉006540600P粉006540600471 Il y a quelques jours563

répondre à tous(1)je répondrai

  • P粉352408038

    P粉3524080382023-08-16 00:58:35

    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;

    répondre
    0
  • Annulerrépondre