为什么我在React组件渲染中收到此警告“不赞成使用可变样式”？

Question

I am trying to set a styleObj in react component render function like this:

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>
    );
  }
}

but it warn me that:

warning.js?0260:44 Warning: figure was passed a style object that has previously been mutated. Mutating style is deprecated. Consider cloning it beforehand. Check the render of ImgFigure . Previous style: {left: 0, top: 0}. Mutated style: {left: 519, top: 272}.

I've searched relative information and in most cases the style is assigned a 'NaN' or is added additional style. I don't know where I am wrong, could you help me?

Answer 1

The error is pretty self explanatory. The solution maybe not so much. It's telling you that you passed it a reference to an object which may have been mutated since you declared it with let . The correct way would be to declare it as const . Of course then you can't reassign it but that's ok because you shouldn't be in the first place.

Instead, consider this:

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

Or even better, add a defaultProps attribute to the component and ensure this.props.arrange.pos is always at least an empty object.