REACT：当子组件有错误时隐藏父组件

Question

I have components like this

• < Parent container>
  • < image description>
  • < image container>
    • < image tag>
    • < image caption text>

how this works is parent container has a name of a city which it passes down to image container

which makes a search query with that city to make some image URL

now that image url is passed to image tag

now when that image url is failing to fetch source, image is coming as blank, but other things like image description which are higher up in heirarchy are still showing up..

I can handle image load failure at image container level maybe, but how to percolate this to parent container so that parent container itself hides when image load fails

Answer 1

I'd recommend giving this a read around Lifting state

It sounds to me like you're making an API call to get an image, which may not always exist, and then to render other components based on this. The API call could be lifted to the top parent container, and render the child components based on the result of this call.

The parent makes the call to get the image, and then there you can decide what you want to render based on success or failure.

Answer 2

You can simply pass in a callback prop for this type of event:

function ImageComponent({ imageSrc, onImageLoadError }) {
  return (
    <img onError={onImageLoadError} src={imageSrc} />
  );
}

and then in you ParentComponent:

function ParentComponent() {
  const [imgSrc, setImgSrc] = React.useState("some_image_url");
  const handleImageLoadError = () => {
    // do something in case of error (show a default image etc)
    setImgSrc('default_image_which_loads');
  };

  return (
    <ImageComponent imageSrc={imgSrc} onImageLoadError={handleImageLoadError} />
  )
}

or if you want to hide the image component you can do that as well:

function ParentComponent() {
  const [imgHasError, setImgHasError] = React.useState(false);
  const handleImageLoadError = () => {
    // hide image in case of error
    setImgHasError(true);
  };

  return (
    {imgHasError ? null : (<ImageComponent imageSrc={imgSrc} onImageLoadError={handleImageLoadError} />)}
  )
}