Hantar tatasusunan kepada komponen

Question

Saya baru mengenali React dan memerlukan bantuan dengan perkara berikut..

Saya mempunyai komponen yang menerima senarai tatasusunan untuk memaparkan komponen dan memerlukan komponen berasingan untuk memanipulasi tatasusunan

Komponen yang diberikan:

export function DashboardContent() {
    kembali (
        <Grid>
            <Grid.Col sm={12} md={12} lg={4}>
                <Kad Profil />
            </Grid.Col>
            <Grid.Col sm={12} md={12} lg={8}>
                <Flex direction="column" h="100%" justify="space-antara" gap="md">
                    <Kad Selamat Datang />
                    <StatsGroup data={mockData} />
                </Flex>
            </Grid.Col>
            <Grid.Col sm={12} md={12} lg={8}>
                <Kad Baki />
            </Grid.Col>
            <Grid.Col sm={12} md={12} lg={4}>
                <Kad Gambaran Keseluruhan />
            </Grid.Col>
        </Grid>
    );
}

mockData ialah tempat saya perlu menghantar tatasusunan melalui panggilan API Pada masa ini menghantar data simulasi berikut:

export const mockData = [
    {
        tajuk: 'ABC',
        nilai: '$7,999',
        perbezaan: 50,
    },
    {
        tajuk: 'XXX',
        nilai: '$4,00',
        perbezaan: -13,
    },
    {
        tajuk: 'Nol',
        nilai: '$ 0.745',
        perbezaan: 1,
    },
];

Memerlukan bantuan js komponen baharu yang boleh mengurus dan membuat panggilan API secara bebas dan menghantar tatasusunan dalam format yang diterangkan dalam simulasi.

Telah mencuba kod berikut tetapi tidak berjaya, sebarang bantuan amat kami hargai

import React, { useEffect, useState } daripada 'react';
import axios daripada 'axios';

antara muka CustomArray {
    tajuk: rentetan;
    nilai: rentetan;
    perbezaan: nombor;
}
token const =
    'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';

const axiosInstance = axios.create({
    tajuk: {
        Keizinan: `Pembawa ${token}`,
    },
});
const Penggunaan = () =>
    const [pengguna, setUsers] = useState([]);

    const fetchUsers = async () =>
        respons const = tunggu axios.get(
            'https://myrestservices.com/api/v2/organizations/AXZ/usage'
        );
        const usersData = response.data;

        const usersArray = usersData.map(user => ({
            tajuk: user.title,
            nilai: user.value,
            perbezaan: user.diff,
        }));

        setUsers(usersArray);
    };

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

    kembali pengguna;
};

eksport lalai Penggunaan;

Answer 1

Perkara pertama yang perlu anda lakukan ialah menukar pelaksanaan Penggunaan kepada sesuatu yang serupa dengan cangkuk tersuai bertindak balas

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;

Kemudian buat perubahan berikut di dalam komponen StatsGroup untuk memaparkan data ini.

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;

Jadi, untuk mewujudkan pautan antara cangkuk tersuai dan komponen StatGroup, mula-mula panggil cangkuk tersuai dan kemudian selepas mendapat keputusan, hantar data ke prop komponen StatGroup seperti yang ditunjukkan di bawah.

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;