html – React中img标记中的onError

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

总结

以上是内存溢出为你收集整理的html – React中img标记中的onError全部内容，希望文章能够帮你解决html – React中img标记中的onError所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。