I am new to React and need help with the following..

I have a component that accepts a list of arrays to render the component and need a separate component to manipulate the array

Rendered component:

export function DashboardContent() { return (                  ); }

mockData is where I need to pass the array through the API call Currently passing the following simulation data:

export const mockData = [ { title: 'ABC', value: '$7,999', diff: 50, }, { title: 'XXX', value: '$4,00', diff: -13, }, { title: 'Null', value: '$ 0.745', diff: 1, }, ];

Need the help of a new component js that can independently manage and make API calls and pass arrays in the format described in the simulation.

Been trying the following code with no success, any help would be greatly appreciated

import React, { useEffect, useState } from 'react'; import axios from 'axios'; interface CustomArray { title: string; value: string; diff: number; } const token = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'; const axiosInstance = axios.create({ headers: { Authorization: `Bearer ${token}`, }, }); const Usage = () => { const [users, setUsers] = useState([]); const fetchUsers = async () => { const response = await axios.get( 'https://myrestservices.com/api/v2/organizations/AXZ/usage' ); const usersData = response.data; const usersArray = usersData.map(user => ({ title: user.title, value: user.value, diff: user.diff, })); setUsers(usersArray); }; useEffect(() => { fetchUsers(); }, []); return users; }; export default Usage;

const DashboardContent = () => { // 使用您想要从中获取数据的任何API URL const apiUrl = 'https://myrestservices.com/api/v2/organizations/AXZ/usage'; const apiData = useApiData(apiUrl); return (

Stats Group

); }; export default DashboardContent;

reply all (1)

P粉3524080382023-08-16 00:58:35 1 floor

The first thing that needs to be done is to change the implementation of Usage to something similar to react custom hooks

Then make the following changes inside the StatsGroup component to render this data.

const StatsGroup = ({ apiData }) => { return (  {apiData.map(item => (  Title: {item.title}
 Value: {item.value}
 Diff: {item.diff}
 
 ))} 
 ); }; export default StatsGroup;

So, to establish a link between a custom hook and the StatGroup component, first call the custom hook and then after getting the result pass the data to the StatGroup component's prop as shown below.

const DashboardContent = () => { // 使用您想要从中获取数据的任何API URL const apiUrl = 'https://myrestservices.com/api/v2/organizations/AXZ/usage'; const apiData = useApiData(apiUrl); return (  Stats Group
  
 ); }; export default DashboardContent;