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

// 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;

个字符

**预期行为：我期望SearchCard**组件在每个渲染示例中只记录一次日志和获取一次数据，但它似乎多次记录和获取数据，导致意外行为。