onError in img tag in React

Question

Я хочу заменить неработающую ссылку на изображение по умолчанию в ответ. Обычно я использую onerror, но он работает не так, как ожидалось. В частности, я получаю повторяющиеся ошибки «Не удается обновить во время существующего перехода состояния (например, в пределах render)». В конце концов появляется изображение по умолчанию, но оно занимает много времени (много отпечатков этой ошибки). Это очень похожий вопрос, заданный здесь: 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; 

Answer 1

Код вызывает 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 

Answer 2

Вы можете заменить изображение сломанной ссылке без сохранения изображения в URLs состоянии.

<img 
onError={(event)=>event.target.setAttribute("src","default-image-link")} 
src="image-broken-link" 
/>