我想用react中的默认图像替换断开的链接.我通常会使用onerror,但它没有按预期工作.具体来说,我得到了“在现有状态转换期间无法更新(例如在渲染中)”的重复错误.最终,出现默认图像,但需要很长时间(此错误的许多打印).这是一个非常类似的问题： react.js Replace 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;

代码调用this.onError而不是传递对它的引用.每次调用render都会调用this.onError().删除括号,看看是否修复了它：

<img className="modalimage" 
  src={this.state.imageUrl}
  onError={this.onError()}/> // `onError` is being called here

固定版本：

<img className="modalimage" 
  src={this.state.imageUrl}
  onError={this.onError}/> // `onError` is being passed as a reference here

当所有其他浏览器(IE7,8,9,FF,Opera和Safari)都重复调用它时,为什么Chrome只调用img元素的onerror事件？

有没有办法强制它再次重复攻击(在Chrome中)？

jsfiddle

HTML：

<div id="thisWorks">
    this works in Chrome. onerror event is called once.
    <img src="http://www.asdfjklasdfasdf.com/bogus1.png" 
        onerror="fixit(this);" 
        rsrc="http://eatfrenzy.com/images/success-tick.png" />
</div>

<div id="thisDoesNotWork">
    this does not work in Chrome. onerror event is not called twice.
    <img src="http://www.asdfjklasdfasdf.com/bogus1.png" 
        onerror="fixit(this);"
        rsrc="http://www.asdfjklasdfasdf.com/bogus2.png|http://eatfrenzy.com/images/success-tick.png" />
</div>

JAVASCRIPT：

function fixit(img)
{
    var arrPhotos = img.getAttribute('rsrc').split('|');

    // change the img src to the next available
    img.setAttribute('src',arrPhotos.shift());

    // Now put back the image list (with one less) into the rsrc attr
    img.setAttribute('rsrc',arrPhotos.join('|'));

    return true;    
}

编辑：
根据@Sunil D.关于Chrome由于initial fiddle示例中www.asdfjklasdfasdf.com域名无效而未发布新查询的评论,我继续更改域名以匹配成功图片的域名,但是不同的文件名所以它仍然是404.这将证明它不是无效的域名导致Chrome在第二次尝试时纾困.

编辑：
更新了小提琴,并将jquery的使用简单地删除,并将其排除在外.

我尝试过上面提到的方法,setAttribute(‘src’,null)有副作用,即添加另一个请求.

最后,我用

setTimeout(function(){ imgElement.src = 'http://xxxx'; },0)

,这个有效！

例如,请参见jsfiddle.

CSS：

.posting-logo-div {  }
.posting-logo-img { height:120px; width:120px; }
.posting-photo-div { height:5px;width:5px;position:relative;top:-140px;left:648px; }
.posting-photo-img { height:240px; width:240px; }

HTML：

<div id="image"https://www.jb51.cc/tag/logo/" target="_blank">logo-div"><img src="../images/some-logo1.jpg" onerror="this.src='../images/no-logo-120.jpg';"https://www.jb51.cc/tag/logo/" target="_blank">logo-img"></div>
<div id="photo"><img src="../images/some-logo2.jpg" onerror="this.src='../images/no-logo-240.jpg';"></div>

这在Chrome或Mozilla中似乎不起作用,但在IE中可以使用.

这有效：

<img src="invalid_link"
     onerror="this.onerror=null;this.src='https://placeimg.com/200/300/animals';"
>

现场演示：http://jsfiddle.net/oLqfxjoz/

正如nikola在下面的评论中指出的,如果备份URL也无效,某些浏览器将再次触发“错误”事件,这将导致无限循环.我们可以通过this.onerror = null;简单地取消“错误”处理程序来防范这种情况.