<p>Saya baru mengenali React dan memerlukan bantuan dengan perkara berikut..</p> <p>Saya mempunyai komponen yang menerima senarai tatasusunan untuk memaparkan komponen dan memerlukan komponen berasingan untuk memanipulasi tatasusunan</p> <p>Komponen yang diberikan: </p> <pre class="brush:php;toolbar:false;">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> ); }</pre> <p>mockData ialah tempat saya perlu menghantar tatasusunan melalui panggilan API Pada masa ini menghantar data simulasi berikut: </p> <pre class="brush:php;toolbar:false;">export const mockData = [ { tajuk: 'ABC', nilai: '$7,999', perbezaan: 50, }, { tajuk: 'XXX', nilai: '$4,00', perbezaan: -13, }, { tajuk: 'Nol', nilai: '$ 0.745', perbezaan: 1, }, ];</pre> <p>Memerlukan bantuan js komponen baharu yang boleh mengurus dan membuat panggilan API secara bebas dan menghantar tatasusunan dalam format yang diterangkan dalam simulasi.</p> <p>Telah mencuba kod berikut tetapi tidak berjaya, sebarang bantuan amat kami hargai</p> <pre class="brush:php;toolbar:false;">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;</pre> <p><br /></p>

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;

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;

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;