useState pour mettre à jour une propriété d'objet

Vandanaa Swaminathan:

Je suis nouveau à réagir. J'ai un élément fonctionnel qui est utilisé pour rendre h l'image et des propriétés d'une image passés comme des accessoires pour le composant. Je voudrais mettre à jour la source d'image quand il y a une erreur qui rend l'image. Je voudrais aussi mettre à jour la propriété d'état du composant parent et le transmettre au parent. Je ne suis pas sûr de savoir comment atteindre le même. Je me bats depuis si longtemps pour y parvenir. S'il vous plaît quelqu'un peut me aider à résoudre ce problème. Merci d'avance.

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:

Au lieu d'utiliser nouvel état en ImageRenderercomposant, vous pouvez simplement passer setState des parents via des accessoires comme celui - ci;

composant parent

import React, { useStae } from 'react'

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

composant 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> 
    )
}