Question

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

父项：

import React, {
  useState
} from 'react';
import PropTypes from 'prop-types';
import ImageRenderer from './ImageRenderer';
import VideoRenderer from './VideoRenderer';

const getComponent = {
  'image': ImageRenderer,
  'video': VideoRenderer
}

const AssetRenderer = (props) => {
    console.log('props in asset ren:', props);
    const [assetInfo, setAssetInfo] = useState(props);
    console.log('assetInfo in parent:', assetInfo);
    const isPublished = assetInfo.assetInfo.isAssetPublished;
    let source = assetInfo.assetInfo.assetUrl;
    const PreviewComponent = getComponent[assetInfo.assetInfo.type];
    return ( < div > {
        isPublished && source && < PreviewComponent assetInfo = {assetInfo} setAssetInfo = { setAssetInfo } />} </div>
      );
    }

    AssetRenderer.propTypes = {
      assetInfo: PropTypes.object.isRequired
    };
    export default AssetRenderer;

子组件：

import React from 'react';
import PropTypes from 'prop-types';
import {
  Subheading
} from '@contentful/forma-36-react-components';

const ImageRenderer = props => {
  console.log('inside image renderer', props);
  return ( <
    div id = "asset-img" >
    <
    Subheading > Image preview: < /Subheading> <
    p > Name: {
      props.assetInfo.assetInfo.name
    } < /p> <
    p > Type: {
      props.assetInfo.assetInfo.type
    } < /p>  <
    p > Url: {
      props.assetInfo.assetUrl
    } < /p>  <
    img src = {
      props.assetInfo.assetInfo.assetUrl
    }
    alt = "name"
    onError = {
      e => {
        props.setAssetInfo(assetInfo => {
          return { ...props.assetInfo.assetInfo,
            assetUrl: 'https://example.com/404-placeholder.jpg',
            isAssetPublished: false
          } //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;

Answer 1

您不必通过ImageRenderer组件使用新状态，而只需通过如下所示的props传递Parent的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> 
    )
}

Answer 2

如果仅用于处理图像错误，则无需重新渲染组件即可实现：

<img src={assetInfo.assetInfo.assetUrl} alt="name"
     onError={e => {
          e.target.src = 'https://example.com/404-placeholder.jpg';
     }}
/>

useState更新对象属性

2 个答案: