配列をコンポーネントに渡す

Question

私は React を初めて使用するので、次の点でサポートが必要です。

コンポーネントをレンダリングするために配列のリストを受け取るコンポーネントがあり、配列を操作するには別のコンポーネントが必要です

レンダリングされたコンポーネント:

エクスポート関数 DashboardContent() {
    戻る （
        ＜グリッド＞
            <Grid.Col sm={12} md={12} lg={4}>
                <プロフィールカード />
            </Grid.Col>
            <Grid.Col sm={12} md={12} lg={8}>
                <Flex Direction="column" h="100%" justify="space-between" gap="md">
                    <ウェルカムカード />
                    <StatsGroup data={mockData} />
                </フレックス>
            </Grid.Col>
            <Grid.Col sm={12} md={12} lg={8}>
                <バランスカード/>
            </Grid.Col>
            <Grid.Col sm={12} md={12} lg={4}>
                <概要カード />
            </Grid.Col>
        </グリッド>
    );
}

mockData は、API 呼び出しを通じて配列を渡す必要がある場所です 現在、次のシミュレーション データを渡しています:

export const duckData = [
    {
        タイトル：「ABC」、
        値: '$7,999'、
        差分: 50、
    }、
    {
        タイトル:「XXX」、
        値: '$4,00'、
        差分: -13、
    }、
    {
        タイトル:「ヌル」、
        値: '$ 0.745'、
        差分: 1、
    }、
];

API 呼び出しを独立して管理および実行し、シミュレーションで記述された形式で配列を渡すことができる新しいコンポーネント js の助けが必要です。

次のコードを試してみましたが成功しませんでした。助けていただければ幸いです

import React, { useEffect, useState } from 'react';
「axios」から axios をインポートします。

インターフェース CustomArray {
    タイトル: 文字列;
    値: 文字列;
    差分: 数値;
}
定数トークン =
    「xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx」;

const axiosInstance = axios.create({
    ヘッダー: {
        認可: `ベアラー ${token}`、
    }、
});
const 使用法 = () => {
    const [users, setUsers] = useState([]);

    const fetchUsers = async () => {
        const 応答 = await axios.get(
            「https://myrestservices.com/api/v2/organizations/AXZ/usage」
        );
        const usersData = 応答.データ;

        const usersArray = usersData.map(user => ({
            タイトル: user.title、
            値: user.value、
            diff: ユーザー.diff、
        }));

        setUsers(usersArray);
    };

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

    リターンユーザー。
};

デフォルトの使用法をエクスポート;

Answer 1

最初に行う必要があるのは、Usage の実​​装を反応カスタム フックに似たものに変更することです。

リーリー

次に、StatsGroup コンポーネント内で次の変更を加えて、このデータをレンダリングします。

リーリー

したがって、カスタム フックと StatGroup コンポーネント間のリンクを確立するには、まずカスタム フックを呼び出し、結果を取得した後、以下に示すようにデータを StatGroup コンポーネントのプロップに渡します。

リーリー