Запоминание полученных результатов в компоненте

Question

Я работаю над компонентом, который добавляет изображения к элементам. Вы можете загрузить собственное изображение или выбрать изображение, загруженное из API, в зависимости от имени элемента.

Вот корневой компонент:

const AddMedia = (props) => {
  const [currentTab, setCurrentTab] = useState(0);
  const [itemName, setItemName] = useState(props.itemName);

  return (
    <div>
      <Tabs
        value={currentTab}
        onChange={() => setCurrentTab(currentTab === 0 ? 1 : 0)}
      />
      <div hidden={currentTab !== 0}>
        <FileUpload />
      </div>
      <div hidden={currentTab !== 1}>
        {currentTab === 1 && <ImagePicker searchTerm={itemName} />}
      </div>
    </div>
  );
};

А вот и <ImagePicker />:

import React, { useState, useEffect } from "react";

function ImagePicker({ searchTerm, ...props }) {
  const [photos, setPhotos] = useState([]);

  const searchForImages = async (keyword) => {
    const images = await api.GetImagesByKeyword(keyword);

    return images;
  };

  useEffect(() => {
    const result = searchForImages(searchTerm);
    setPhotos(result);
  }, []);

  return (
    <>
      {photos.map(({ urls: { small } }, j) => (
        <img alt={j} src={small} className={classes.img} />
      ))}
    </>
  );
}

const areSearchTermsEqual = (prev, next) => {
  return prev.searchTerm === next.searchTerm;
};

const MemorizedImagePicker = React.memo(ImagePicker, areSearchTermsEqual);
export default MemorizedImagePicker;

Я борюсь с тем, чтобы компонент не получал результаты снова, если searchTermне изменилось. Например, когда компонент загружает его на вкладке 0 (загрузка изображения), вы переключаетесь на вкладку 1 (выбираете изображение), и он получает результаты для searchTerm, затем вы переключаетесь на 0 и снова на 1, и он снова выбирает их, хотя searchTermне изменилось. Как видите, я пробовал использовать React.memoно безрезультатно. Также я добавил currentTab === 1 чтобы он не получал фотографии при рендеринге корневого компонента и извлекал их, только если активная вкладка равна 1.

Answer 1

Вам следует добавить searchTerm как зависимость от useEffect так что он не будет загружаться снова, если searchTerm не изменилось:

 useEffect(() => {
    const result = searchForImages(searchTerm);
    setPhotos(result);
  }, [searchTerm]);

Дополнительная информация: если вы используете eslint для линтинга вашего кода, вы можете использовать react-hooks/exhaustive-deps правило, чтобы избежать такой ошибки.