Maison > Questions et réponses > le corps du texte
P粉3524080382023-08-16 00:58:35
La première chose que vous devez faire est de modifier l'implémentation de Usage en quelque chose de similaire pour réagir aux hooks personnalisés
const useApiData = (apiUrl) => { const [data, setData] = useState([]); const fetchData = async () => { try { const response = await axios.get(apiUrl); const responseData = response.data; const dataArray = responseData.map(item => ({ title: item.title, value: item.value, diff: item.diff, })); setData(dataArray); } catch (error) { console.error('Error fetching data:', error); } }; useEffect(() => { fetchData(); }, [apiUrl]); return data; }; export default useApiData;
Apportez ensuite les modifications suivantes dans le composant StatsGroup pour restituer ces données.
const StatsGroup = ({ apiData }) => { return ( <div> {apiData.map(item => ( <div key={item.title}> <p>Title: {item.title}</p> <p>Value: {item.value}</p> <p>Diff: {item.diff}</p> </div> ))} </div> ); }; export default StatsGroup;
Donc, pour établir un lien entre un hook personnalisé et un composant StatGroup, appelez d'abord le hook personnalisé, puis après avoir obtenu le résultat, transmettez les données à l'accessoire du composant StatGroup comme indiqué ci-dessous.
const DashboardContent = () => { // 使用您想要从中获取数据的任何API URL const apiUrl = 'https://myrestservices.com/api/v2/organizations/AXZ/usage'; const apiData = useApiData(apiUrl); return ( <div> <h1>Stats Group</h1> <StatsGroup apiData={apiData} /> </div> ); }; export default DashboardContent;