オブジェクトのプロパティを更新するuseState

Vandanaaスワミナサン：

私は反応するように新しいです。私は午前の画像およびコンポーネントに小道具として渡された画像のいくつかのプロパティをレンダリングするために使用される機能性成分を持っています。私は、画像をレンダリングするときにエラーが発生したときの画像ソースを更新したいと思います。私はまた、親コンポーネントの状態プロパティを更新するようにして戻って親に渡します。私は同じことを達成する方法がわからないです。私はこれを達成するために長い間苦労してきました。缶誰かの助けが私はこの問題を解決してください。事前に感謝します。

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：

代わりに新しい状態を使用するImageRendererコンポーネントは、あなただけのような小道具を経由して親のSETSTATEを渡すことができます。

親コンポーネント

import React, { useStae } from 'react'

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

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

オブジェクトのプロパティを更新するuseState

おすすめ