在组件中记住获取的结果

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 来 lint 你的代码，你可以使用react-hooks/exhaustive-deps 规则来避免这种错误。