使用流的React库导致问题

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

function MyComponent() {
  const [data, setData] = useState(null);
  const { data: fetchedData, error } = useSWR('/api/data', fetch);

  const updateData = useCallback((newData) => {
    setData(newData);
  }, []);

  if (error) return <div>Failed to load</div>;
  if (!fetchedData) return <div>Loading...</div>;

  return (
    <div>
      <h1>Data</h1>
      <pre>{JSON.stringify(fetchedData, null, 2)}</pre>
      <button onClick={() => updateData({ ...fetchedData, updated: true })}>
        Update Data
      </button>
    </div>
  );
}

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

const DataContext = React.createContext();

function DataProvider({ children }) {
  const { data, error } = useSWR('/api/data', fetch);
  return (
    <DataContext.Provider value={{ data, error }}>
      {children}
    </DataContext.Provider>
  );
}

function useData() {
  return useContext(DataContext);
}

function MyComponent() {
  const { data, error } = useData();

  if (error) return <div>Failed to load</div>;
  if (!data) return <div>Loading...</div>;

  return (
    <div>
      <h1>Data</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

function App() {
  return (
    <DataProvider>
      <MyComponent />
    </DataProvider>
  );
}

import useSWR from 'swr';

function MyComponent() {
  const { data, error } = useSWR('/api/data', fetch);

  if (error) return <div>Failed to load</div>;
  if (!data) return <div>Loading...</div>;

  return (
    <div>
      <h1>Data</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}