如何在react js中将rest api调用保存在不同文件中

// api.js

export const getUser = async () => {
  try {
    const response = await fetch('/api/user');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error:', error);
    throw error;
  }
};

export const updateUser = async (userId, userData) => {
  try {
    const response = await fetch(`/api/user/${userId}`, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(userData),
    });
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error:', error);
    throw error;
  }
};

// MyComponent.js

import React, { useEffect, useState } from 'react';
import { getUser, updateUser } from './api';

const MyComponent = () => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const userData = await getUser();
        setUser(userData);
      } catch (error) {
        // Handle error
      }
    };

    fetchData();
  }, []);

  const handleUpdateUser = async () => {
    try {
      const updatedUser = await updateUser(user.id, { name: 'New Name' });
      setUser(updatedUser);
    } catch (error) {
      // Handle error
    }
  };

  return (
    <div>
      {user ? (
        <div>
          <h1>{user.name}</h1>
          <button onClick={handleUpdateUser}>Update User</button>
        </div>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
};

export default MyComponent;