useState para actualizar una propiedad de objeto

Vandanaa Swaminathan:

Soy nuevo a reaccionar. Tengo un componente funcional que se utiliza para representar la imagen de la mañana y algunas propiedades de una imagen pasan como apoyos al componente. Me gustaría actualizar el origen de la imagen cuando hay un error de representación de la imagen. También me gustaría que para actualizar la propiedad estado del componente matriz y pasar de nuevo a los padres. No estoy seguro de cómo lograr el mismo. He estado luchando durante tanto tiempo para lograr esto. Por favor, puede alguien me ayude a resolver este problema. Muchas gracias de antemano.

import React, { useState } from 'react';
import PropTypes from 'prop-types';

const ImageRenderer =  props =>  {

    const [assetInfo, setAssetInfo] = useState(props); //assetInfo contains asseturl, type, name, type of the image, isAssetPublished

    return(
        <div id="asset-img">
             <p> Name: {assetInfo.assetInfo.name} </p>
             <p> Type: {assetInfo.assetInfo.type} </p> 
             <p> Url: {assetInfo.assetInfo.assetUrl} </p> 
            <img src={assetInfo.assetInfo.assetUrl}  alt="name"  onError={e => {
                    setAssetInfo(assetInfo => {
                        return { ...assetInfo, assetUrl: 'https://example.com/404-placeholder.jpg' } //would like to update the asset url to 404 and also set isAssetPublished to false and pass it back to parent to update parent state 
                    });
            }}/>
        </div> 
    )
}
ImageRenderer.propTypes = {
    assetInfo:PropTypes.object.isRequired
};
export default ImageRenderer;

ilkerkaran:

En lugar de utilizar nuevo estado en el ImageRenderercomponente, puede simplemente pase setstate de los padres a través de los apoyos de este tipo;

componente de los padres

import React, { useStae } from 'react'

const parentCompoennt = props => {
  const [assetInfo,setAssetInfo] = useState();
  return (
    <ImageRenderer assetInfo={assetInfo} setAssetInfo={setAssetInfo} />
  );
}

componente imageRenderer

const ImageRenderer =  props =>  {


    return(
        <div id="asset-img">
             <p> Name: {props.assetInfo.assetInfo.name} </p>
             <p> Type: {props.assetInfo.assetInfo.type} </p> 
             <p> Url: {props.assetInfo.assetInfo.assetUrl} </p> 
            <img src={props.assetInfo.assetInfo.assetUrl}  alt="name"  onError={e => {
                    props.setAssetInfo(assetInfo => {
                        return { ...props.assetInfo, assetUrl: 'https://example.com/404-placeholder.jpg' } //would like to update the asset url to 404 and also set isAssetPublished to false and pass it back to parent to update parent state 
                    });
            }}/>
        </div> 
    )
}