在反应中重新渲染太多

Question

我有一个名为

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

组件仅记录一次并在每个渲染实例中获取一次数据。然而，它似乎多次记录和获取数据，导致意外的行为。

Answer 1

您在songs.map中使用SearchCard，因为每次迭代都有一个控制台会记录，假设您在songs数组中有五个元素，然后五个控制台将记录以避免这种情况 - 移动您的网络致电家长级别