在React组件中，onError img函数没有工作触发。

Question

我已经写了React组件来替换我正在做的一个Symfony项目中使用的html twig组件。然而，并不是每一个Article的实例都能带回一个图片url，这使得这些特定文章的页面无法加载。

这是我对文章组件的处理方法。

function ArticleImage({ articleImageUrl, articleImageAlt, articleImageCaption }) {

  const addDefaultSrc = (e) => {
    e.target.src="https://upload.wikimedia.org/wikipedia/commons/8/8b/Flag_of_.svg";
    e.target.onerror = null;
  };

  return (
    <div className={styles.articleImage}>
      <img
        onError={addDefaultSrc}
        src={articleImageUrl}
        alt={articleImageAlt}
      />
      {articleImageCaption}
    </div>
  );
}

export default ArticleImage;

Answer 1

不要直接更新DOM。只是改变状态。

例子

const { useState, useEffect } = React;

const App = () => {
  const [{url, alt}, setImage] = useState({
    url: 'https://i.picsum.photos/id/-1/100/100.jpg',
    alt: 'test'
  })
  
  const onError = () => {
    setImage(image => ({
      ...image,
      url: 'https://i.picsum.photos/id/194/100/100.jpg'
    }))
  }

  return <div>
    <img src={url} onError={onError} alt={alt}/>
  </div>
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
  );

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<div id="root"></div>