"scripts": {
    "dev": "vite",
    "start": "vite",
    "build": "vite build",
    "test": "vitest",
    "preview": "vite preview",

    // ↓ setting a script for json server
    "json-server": "npx json-server -w ./mock/db.json -p 4030"
  },

आयात {useeffect, usestate} "प्रतिक्रिया" से; "एक्सियोस" से एक्सियोस का आयात; const getUserData = ({url}) => { const [userData, setUserData] = usestate (null); UseEffect () => { axios.get (url) .then ((प्रतिक्रिया) => setuserData (response.data)); // eslint- डिसेबल-नेक्स्ट-लाइन रिएक्ट-हुक/एग्जॉस्टिव-डेप्स }, []); वापस करना (

 npm run json-server

"

import GetUserData from "./components/GetUserData";

//The path of test data
export const ENDPOINT_URL = 'http://localhost:4030/users/1';

const Example = () => {
  return (
    
      
    >
  );
};

export default Example;

क्योंकि परीक्षण उपयोगकर्ता डेटा के बिना जारी है।
]

import { useEffect, useState } from "react";
import axios from "axios";

const GetUserData = ({ url }) => {
  const [userData, setUserData] = useState(null);

  useEffect(() => {
    axios.get(url).then((response) => setUserData(response.data));
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    

      {userData ? (
        
          
Profile
          

            
ID: {userData.id}
            
Name: {userData.name}
          
        >
      ) : (
        
...loading
      )}
    
  );
};

export default GetUserData;

]

import GetUserData from "./components/GetUserData";

//The path of test data
export const ENDPOINT_URL = 'http://localhost:4030/users/1';

const Example = () => {
  return (
    
      
    >
  );
};

export default Example;

• प्रदर्शन