useState更新对象属性

问题描述 投票:0回答:2

我是React的新手。我有一个用于渲染图像的功能组件,以及作为道具传递给该组件的图像的某些属性。渲染图像时出错,我想更新图像源。我还想更新父组件的state属性,并将其传递回父组件。我不确定如何实现相同的目标。为了实现这一目标,我已经奋斗了很长时间。请有人帮我解决这个问题。提前非常感谢。

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;
reactjs use-state
2个回答
-1
投票
我引自官方文件:

挂钩是React 16.8中的新增功能。它们使您无需编写类即可使用状态和其他React功能。

这是链接https://reactjs.org/docs/hooks-state.html
© www.soinside.com 2019 - 2024. All rights reserved.