<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>