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

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

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

エクスポート関数 DashboardContent() { 戻る （ ＜グリッド＞  <プロフィールカード />    <ウェルカムカード />     <バランスカード/>   <概要カード />   ); }

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(); }、[]); リターンユーザー。 }; デフォルトの使用法をエクスポート;