Warum erhalte ich die Warnung "Mutating` style "ist im Component render nicht mehr gültig?

Question

Ich versuche, eine styleObj zu setzen in der Komponente Funktion wie diese machen reagieren:

class ImgFigure extends React.Component { 
    render() { 
    let styleObj = {}; 

    // props.arrange is a object like this { pos: { left: '0', top: '0'}} 
    if (this.props.arrange.pos) { 
     styleObj = this.props.arrange.pos; 
    } 

    return (
     <figure className="img-figure" style={styleObj}> 
     <img src={this.props.data.imageURL} alt={this.props.data.title} /> 
     <figcaption> 
      <h2 className="img-title">{this.props.data.title}</h2> 
     </figcaption> 
     </figure> 
    ); 
    } 
} 

aber warnen mich, dass:

warning.js 0260: 44 Warning: figure einen Stil übergeben wurde Objekt, das zuvor mutiert wurde. Muting style ist veraltet. Betrachten Sie vorher klonen. Überprüfen Sie die render von ImgFigure. Vorherige Stil: {links: 0, oben: 0}. Mutierter Stil: {links: 519, oben: 272}.

Ich habe relative Informationen durchsucht und in den meisten Fällen wird dem Stil ein 'NaN' zugewiesen oder ein zusätzlicher Stil hinzugefügt. Ich weiß nicht, wo ich falsch liege, könntest du mir helfen?

Answer 1

Der Fehler ist ziemlich selbsterklärend. Die Lösung vielleicht nicht so sehr. Es sagt Ihnen, dass Sie ihm einen Verweis auf ein Objekt gegeben haben, das möglicherweise mutiert wurde, seit Sie es mit let deklariert haben. Der korrekte Weg wäre, es als const zu deklarieren. Natürlich kannst du es dann nicht neu zuweisen, aber das ist in Ordnung, weil du nicht an erster Stelle sein solltest.

Stattdessen betrachten dies:

const styleObj = this.props.arrange.pos || {}; 

Oder noch besser, fügen Sie ein defaultProps Attribut auf die Komponente und gewährleisten this.props.arrange.pos immer mindestens ein leeres Objekt ist.