React.jsでAxiosを使用してデータ取得を制限する方法

ページの読み込み時にデータを取得する場合:

import React, { useEffect, useState } from 'react';
import axios from 'axios';
const MyComponent = () => {
 const [data, setData] = useState([]);
 useEffect(() => {
   const fetchData = async () => {
     try {
       const response = await axios.get('APIのエンドポイント');
       setData(response.data.slice(0, 10)); // 最初の10件のデータのみを取得
     } catch (error) {
       console.log(error);
     }
   };
   fetchData();
 }, []);
 return (
   <div>
     {/* データの表示 */}
   </div>
 );
};
export default MyComponent;

上記の例では、useEffectフックを使用してコンポーネントがマウントされた時にデータを取得しています。axios.getメソッドを使用して、APIのエンドポイントからデータを取得し、response.data.slice(0, 10)を使用して最初の10件のデータのみを取得しています。

ボタンのクリックなどのイベントに応じてデータを取得する場合:

import React, { useState } from 'react';
import axios from 'axios';
const MyComponent = () => {
 const [data, setData] = useState([]);
 const fetchData = async () => {
   try {
     const response = await axios.get('APIのエンドポイント');
     setData(response.data.slice(0, 10)); // 最初の10件のデータのみを取得
   } catch (error) {
     console.log(error);
   }
 };
 return (
   <div>
     <button onClick={fetchData}>データを取得</button>
     {/* データの表示 */}
   </div>
 );
};
export default MyComponent;

上記の例では、ボタンのクリックイベントに応じてデータを取得する方法を示しています。fetchData関数がボタンのクリックイベントで呼び出され、データを取得して表示します。

これらの例では、response.data.slice(0, 10)のようにデータを制限しています。ここでは最初の10件のデータのみを取得していますが、必要に応じて制限の条件を変更することができます。