Übergeben Sie das Array an die Komponente

Question

Ich bin neu bei React und benötige Hilfe bei Folgendem.

Ich habe eine Komponente, die eine Liste von Arrays akzeptiert, um die Komponente darzustellen, und benötige eine separate Komponente, um das Array zu bearbeiten

gerenderte Komponente:

Exportfunktion DashboardContent() {
    zurückkehren (
        <Gitter>
            <Grid.Col sm={12} md={12} lg={4}>
                <ProfileCard />
            </Grid.Col>
            <Grid.Col sm={12} md={12} lg={8}>
                <Flex Direction="column" h="100%" justify="space-between" gap="md">
                    <WelcomeCard />
                    <StatsGroup data={mockData} />
                </Flex>
            </Grid.Col>
            <Grid.Col sm={12} md={12} lg={8}>
                <BalanceCard />
            </Grid.Col>
            <Grid.Col sm={12} md={12} lg={4}>
                <OverviewCard />
            </Grid.Col>
        </Gitter>
    );
}

In

mockData muss ich das Array über den API-Aufruf übergeben Derzeit werden folgende Simulationsdaten übergeben:

export const mockData = [
    {
        Titel: 'ABC',
        Wert: '7.999 $',
        Differenz: 50,
    },
    {
        Titel: 'XXX',
        Wert: '$4,00',
        Differenz: -13,
    },
    {
        Titel: 'Null',
        Wert: '$ 0,745',
        Unterschied: 1,
    },
];

Benötigen Sie die Hilfe einer neuen Komponente js, die unabhängig API-Aufrufe verwalten und durchführen und Arrays in dem in der Simulation beschriebenen Format übergeben kann.

Ich habe den folgenden Code ohne Erfolg ausprobiert. Für jede Hilfe wäre ich sehr dankbar.

import React, { useEffect, useState } from 'react';
Axios aus 'Axios' importieren;

Schnittstelle CustomArray {
    Titel: Zeichenfolge;
    Wert: Zeichenfolge;
    diff: Zahl;
}
const token =
    'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';

const axiosInstance = axios.create({
    Überschriften: {
        Autorisierung: `Bearer ${token}`,
    },
});
const Usage = () =>
    const [users, setUsers] = useState([]);

    const fetchUsers = async () =>
        const Antwort = Warten auf axios.get(
            „https://myrestservices.com/api/v2/organizations/AXZ/usage“
        );
        constuserData = Response.data;

        constuserArray =userData.map(user => ({
            Titel: user.title,
            Wert: user.value,
            diff: user.diff,
        }));

        setUsers(usersArray);
    };

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

    wiederkehrende Benutzer;
};

Standardverwendung exportieren;

Answer 1

需要做的第一件事是将Usage的实现更改为类似于react自定义hook的方式

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;

然后在StatsGroup组件内部进行以下更改以渲染这些数据。

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;

因此，要在自定义hook和StatGroup组件之间建立链接，首先调用自定义hook，然后在获取结果后将数据传递给StatGroup组件的prop，如下所示。

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;