0

我正在开发一个将图像添加到项目的组件。您可以上传自己的图片或选择一张图片，根据项目名称从 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 时才获取它们。

4

1 回答 1

0

您应该添加searchTermas 的依赖项，useEffect以便在searchTerm没有更改的情况下不会再次获取：

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

附加信息，如果你使用 eslint 来 lint 你的代码，你可以使用react-hooks/exhaustive-deps规则来避免这种错误。

于 2020-11-08T08:48:58.100 回答