配列をコンポーネントに渡す
<p>私は React を初めて使用するので、次の点でサポートが必要です。</p>
<p>コンポーネントをレンダリングするために配列のリストを受け取るコンポーネントがあり、配列を操作するには別のコンポーネントが必要です</p>
<p>レンダリングされたコンポーネント: </p>
<pre class="brush:php;toolbar:false;">エクスポート関数 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>
</グリッド>
);
}</pre>
<p>mockData は、API 呼び出しを通じて配列を渡す必要がある場所です
現在、次のシミュレーション データを渡しています: </p>
<pre class="brush:php;toolbar:false;">export const duckData = [
{
タイトル：「ABC」、
値: '$7,999'、
差分: 50、
}、
{
タイトル:「XXX」、
値: '$4,00'、
差分: -13、
}、
{
タイトル:「ヌル」、
値: '$ 0.745'、
差分: 1、
}、
];</pre>
<p>API 呼び出しを独立して管理および実行し、シミュレーションで記述された形式で配列を渡すことができる新しいコンポーネント js の助けが必要です。</p>
<p>次のコードを試してみましたが成功しませんでした。助けていただければ幸いです</p>
<pre class="brush:php;toolbar:false;">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();
}、[]);
リターンユーザー。
};
デフォルトの使用法をエクスポート;</pre>
<p><br /></p>
