passing a function to map in react-CodePudding

I'm trying to render a blog post from my database. but I need to call a download image function for every item.

I've tried to put it in the .map function but in getting errors I'm not to sure how to go about it I pass the function as a prop to the component

  async function downloadImage(path) {
    try {
      setIsOpen(true);
      const { data, error } = await supabase.storage
        .from("public/job-photo")
        .download(`jobphotos/${path}.jpg`);
      if (error) {
        throw error;
      }
      const url = URL.createObjectURL(data);
      setAvatarUrl(url);
    } catch (error) {
      console.log("Error downloading image: ", error.message);
    }
  }

comp

dataFetch.map((item) => (
            <div
              key={item.genid}
              className="flex flex-col rounded-lg shadow-lg overflow-hidden"
            

          {downloadImg(item.genid)}
          <div className="flex-shrink-0">
            <img className="h-48 w-full object-cover" src={img} alt="" />
          </div>
          <div className="flex-1 bg-white dark:bg-secondaryDark p-6 flex flex-col justify-between">
            <div className="flex-1">
              <p className="text-sm font-medium text-indigo-600 dark:text-white">
                {item.category}
              </p>

              <p className="text-xl font-semibold text-gray-900 dark:text-yellow-400">
                {item.jobname}
              </p>
              <p className="mt-3 text-base text-gray-500 dark:text-white">
                {item.jobdescription}
              </p>
            </div>
          </div>
        </div>
      ))}

CodePudding user response：

You need another array state to store the downloaded images. Call downloadImg for all of the dataFetch items on mount, and only try to render the image after the same index in the images array isn't undefined. Something along the lines of:

// Better designed download function that resolves with the downloaded data:
function downloadImage(path) {
    return supabase.storage
        .from("public/job-photo")
        .download(`jobphotos/${path}.jpg`)
        .then(({ data, error }) => {
            if (error) throw error;
            return URL.createObjectURL(data);
        });
}

const [urls, setUrls] = useState(() => dataFetch.map(() => null));
// Fetch all URLS when the component mounts:
useEffect(() => {
  dataFetch.forEach((item, i) => {
    downloadImage(item.genid).then((url) => {
      setUrls(urls => urls.map((prev, j) => j === i ? url : prev);
    }); // .catch(handleError);
  });
}, []);

// Render them once they exist:
dataFetch.map((item, i) => (
    <div
        key={item.genid}
        className="flex flex-col rounded-lg shadow-lg overflow-hidden"
    >
        { urls[i] ? <img src={urls[i] /} : null }