구성요소에 배열 전달
<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 데이터={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 mockData = [
{
제목: 'ABC',
값: '$7,999',
차이: 50,
},
{
제목: 'XXX',
값: '$4,00',
차이: -13,
},
{
제목: '널',
값: '$0.745',
차이: 1,
},
];</pre>
<p>API 호출을 독립적으로 관리 및 생성하고 시뮬레이션에 설명된 형식으로 배열을 전달할 수 있는 새로운 구성 요소 js의 도움이 필요합니다.</p>
<p>다음 코드를 시도했지만 성공하지 못했습니다. 도움을 주시면 대단히 감사하겠습니다</p>
<pre class="brush:php;toolbar:false;">'react'에서 React, { useEffect, useState } 가져오기;
'axios'에서 axios를 가져옵니다.
인터페이스 CustomArray {
제목: 문자열;
값: 문자열;
차이: 숫자;
}
const 토큰 =
'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
const axiosInstance = axios.create({
헤더: {
승인: `전달자 ${token}`,
},
});
const 사용법 = () =>
const [users, setUsers] = useState([]);
const fetchUsers = 비동기 () =>
const 응답 = axios.get(을 기다립니다.
'https://myrestservices.com/api/v2/organizations/AXZ/usage'
);
const usersData = response.data;
const usersArray = usersData.map(사용자 => ({
제목: 사용자.제목,
값: 사용자.값,
차이점: user.diff,
}));
setUsers(usersArray);
};
useEffect(() => {
fetchUsers();
}, []);
복귀 사용자;
};
기본 사용법 내보내기;</pre>
<p><br /></p>
