React的img标签中的onError

我想在反应中用默认图像替换断开的链接。我通常为此使用onerror，但是它没有按预期工作。具体来说，我反复遇到“无法在现有状态转换过程中（例如在之内render）更新”的错误。最终，将显示默认图像，但是需要花费很长时间（多次打印此错误）。这是一个非常相似的问题，在这里问：react.js替换img src onerror。我尝试了此解决方案（第一个解决方案，未使用jQuery），但导致了所描述的错误。我猜onError必须不断被触发，从而导致不断的重新渲染。是否有其他解决方案/修复程序？

   import React from 'react';
import { connect } from 'react-redux';
//import AddImageModal from '../components/AddImageModal.js';
import Button from 'react-bootstrap/lib/Button';
//import { getPostsByUserId } from 'actions'
import Posts from '../components/Posts.js';
var Modal = require('react-modal');
require('../../styles/AddImageModal.scss');
import { save_post } from '../actions';

 const customStyles = {
  content : {
    top                   : '50%',
    left                  : '50%',
    right                 : 'auto',
    bottom                : 'auto',
    marginRight           : '-50%',
    transform             : 'translate(-50%, -50%)'
  }
};

var MyWallScreen = React.createClass({

  getInitialState: function() {
    return { 
      modalIsOpen: false,
      imageUrl: "" 
    };
  },

  openModal: function() {
    this.setState({modalIsOpen: true});
  },

  afterOpenModal: function() {
    // references are now sync'd and can be accessed. 
    this.refs.subtitle.style.color = '#f00';
  },

  closeModal: function() {
    this.setState({modalIsOpen: false});
  },

  setUrl: function(e,val) 
  {
    if (e.keyCode === 13) 
        {
          this.setState({
            imageUrl: val
          });
        }
  },

  resetImageUrl: function()
  {
    this.setState({
      imageUrl: ""
    });
  },

  onError: function() {
    this.setState({
      imageUrl: "default.jpg"
    });
  },


  render: function() {
    const { userPosts, dispatch } = this.props;
    return (
      <div>
        <button onClick={this.openModal}>Add Image</button>

        {/* The meat of the modal. */}
        <Modal
          isOpen={this.state.modalIsOpen}
          onAfterOpen={this.afterOpenModal}
          onRequestClose={this.closeModal}
          style={customStyles} >

        <div className="modalBox">
          <h2 className="modalBanner">Add an image link</h2>
          <input ref="urlInput" 
                className="modalInput"
                onKeyDown={e=>this.setUrl(e,this.refs.urlInput.value)}/>
          {this.state.imageUrl ?
            <img className="modalImage" 
                  src={this.state.imageUrl}
                  onError={this.onError()}/>
            :<div className="modalImage"></div>
          }
          <div>
            <Button className="modalButton" bsStyle = "success" 
                onClick = {() => {
                dispatch(save_post(0,this.state.imageUrl));
                this.closeModal();
                this.resetImageUrl();
                }}>
                Post
            </Button>
            <Button className="modalButton" bsStyle = "danger" 
                onClick = {() => {
                  this.closeModal();
                  this.resetImageUrl();
                }}>
                Cancel
            </Button>
          </div>
        </div>
        </Modal>


        <Posts posts={userPosts}/>
      </div>
    );
  }
});


function mapStateToProps(state, ownProps) {
  return {
    userPosts: state.posts[0]
  }
}


MyWallScreen = connect(mapStateToProps)(MyWallScreen);

export default MyWallScreen;