在useState挂钩中使用SWR数据

import React, { useState } from 'react';
import useSWR from 'swr';

function UserProfile({ userId }) {
  // 使用 SWR 获取用户数据
  const { data: userData, error } = useSWR(`/api/users/${userId}`, fetch);

  // 使用 useState 管理加载状态和错误信息
  const [isLoading, setIsLoading] = useState(true);
  const [errorMessage, setErrorMessage] = useState('');

  // 当 SWR 数据更新时，相应地更新本地状态
  React.useEffect(() => {
    if (error) {
      setErrorMessage('Failed to load user data.');
    } else if (userData) {
      setIsLoading(false);
    }
  }, [error, userData]);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {errorMessage}</div>;

  return (
    <div>
      <h1>{userData.name}</h1>
      <p>{userData.email}</p>
    </div>
  );
}

export default UserProfile;

import useSWR, { mutate } from 'swr';

function UserProfile({ userId }) {
  const { data: userData, error } = useSWR(`/api/users/${userId}`, fetch);

  // 当需要更新数据时调用 mutate
  const refreshData = () => {
    mutate(`/api/users/${userId}`);
  };

  // ...
}