在 React 中获得太多的重新渲染

问：

我有一个名为 Search 的 React 组件，我在其中迭代数据项并为每个项呈现一个 SearchCard 组件。SearchCard 组件包含用于处理播放和暂停操作的逻辑。我注意到 SearchCard 组件中的控制台日志被多次触发，并且还发出了多个获取请求。

// SearchCard.jsx
import { useDispatch } from "react-redux";
import { Link } from "react-router-dom";
import PlayPause from "./PlayPause";
import { playPause, setActiveSong } from "../redux/features/playerSlice";
import { useEffect, useState } from "react";

const SearchCard = ({ song, i, isPlaying, activeSong, data }) => {
  const dispatch = useDispatch();

  console.log('heyyy!'); // This log statement is appearing multiple times

  const handlePauseClick = () => {
    dispatch(playPause(false));
  };

  const handlePlayClick = () => {
    dispatch(setActiveSong({ data, song, i }));
    dispatch(playPause(true));
  };

  // ... rest of the component

  return (
    // ... component JSX
  );
};

export default SearchCard;

// Search.jsx
import React from 'react';
import { useSelector } from 'react-redux';
import { useParams } from 'react-router-dom';
import { Error, Loader, SearchCard } from '../components';
import { useGetSongsBySearchQuery } from '../redux/services/shazam';

const Search = () => {
  const { searchTerm } = useParams();
  const { activeSong, isPlaying } = useSelector((state) => state.player);
  const { data, isFetching, error } = useGetSongsBySearchQuery(searchTerm);

  const songs = data?.tracks?.map((song) => song.data);

  if (isFetching) return <Loader title={`Searching ${searchTerm}...`} />;

  if (error) return <Error />;

  return (
    <div className="flex flex-col">
      <h2 className="font-bold text-3xl text-white text-left mt-4 mb-10">
        Showing results for <span className="font-black">{searchTerm}</span>
      </h2>

      <div className="flex flex-wrap sm:justify-start justify-center gap-8">
        {songs.map((song, i) => (
          <SearchCard
            key={song.id}
            song={song}
            isPlaying={isPlaying}
            activeSong={activeSong}
            data={data.tracks}
            i={i}
          />
        ))}
      </div>
    </div>
  );
};

export default Search;

预期行为：我希望 SearchCard 组件只记录一次，并且每个渲染的实例只获取一次数据。但是，它似乎多次记录和获取数据，导致意外行为。