在当前设置中，getServerSideProps在页面加载到服务器端时获取数据，然后您的组件也具有在客户端获取数据的逻辑。这可能导致冗余的数据获取。
要解决此问题，您可以修改组件以在触发其他请求之前检查数据是否已被提取。您可以使用状态变量来跟踪是否发生了初始服务器端数据提取。下面是一个示例：
import { useState，useEffect } from 'react'; import axios from 'axios';

const Index = ({ animals: initialAnimals }) => {
  const [animals, setAnimals] = useState(initialAnimals);
  const [searchData, setSearchData] = useState([]);
  const [isServerDataFetched, setServerDataFetched] = useState(true); // Initially set to true

  // Function to get search data from the search component
  const getSearchedData = (data) => {
    setSearchData(data);
  };

  const getData = async () => {
    try {
      const config = {
        headers: {
          'Content-Type': 'application/json',
        },
      };

      // Call backend and get data
      const res = await axios.post(`/api/searchAnimals`, { query: query }, config);
      setAnimals(res.data.data);
      setSearchData(res.data.data);
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

  // Fetch initial data on the client side only if it hasn't been fetched on the server side
  useEffect(() => {
    if (!isServerDataFetched) {
      getData();
      setServerDataFetched(true); // Set to true to prevent further client-side fetching
    }
  }, [isServerDataFetched]);

  return (
    <>
      {/* Component for searching data */}
      <SearchAnimals getSearchedData={getSearchedData} />
      {/* Render your data here using the 'animals' state */}
    </>
  );
};

export async function getServerSideProps() {
  await connectDB();

  try {
    const animals = await NewEvent.find({});
    return {
      props: {
        animals: JSON.parse(JSON.stringify(animals)),
      },
    };
  } catch (error) {
    return {
      props: {
        notFound: true,
      },
    };
  }
}

字符串

• 你有一个函数可以获取一些数据（让我们称之为getData）。现在，您在React中还有一个名为useEffect的特殊函数，当您的组件首次加载或发生更改时，它会运行一些代码。现在，如果您将getData放入useEffect中，并在getData中更改导致重新渲染的内容（就像更新状态一样），它可以创建一个循环。这个循环的发生是因为改变状态触发了重新渲染，重新渲染再次运行useEffect，调用getData，循环重复。要修复这个问题，你可能需要确保getData中的内容不会导致不断的重新渲染循环。*