React Hooks：无法分配给只读属性

Question

我正在尝试更新使用 React.createElement() 创建的对象。我试图更新的属性是particleCopy.props.style.top. 下面是我的代码。

import React, { useState } from 'react';
import './Particles.scss';

export default function Particles() {
  const particleStyle = { color: 'blue', position: 'absolute', top: '0px' };
  const [particle, setParticle] = useState(
    React.createElement('div', { style: particleStyle }, '*')
  );

  const moveParticleDown = (particle, top) => {
    const particleCopy = Object.assign({}, particle);
    particleCopy.props.style.top = top + 'px';
    setParticle(particleCopy);
  };

  return (
    <div className="particles_container">
      <div className="particles">{particle}</div>
      <div className="controls">
        <button onClick={() => moveParticleDown(particle, 10)}>down</button>
      </div>
    </div>
  );
}

我收到以下错误

Uncaught TypeError: Cannot assign to read only property 'top' of object '#<Object>'

Answer 1

您的particleCopy函数只是创建 的浅表副本particle，这意味着您正在尝试改变所particle指向的对象。你可以研究一个深度克隆库，或者，现在在 React 中似乎更惯用的方法是，将对象向下传播到你需要的范围内：

const particleCopy = {
  ...particle,
  props: {
    ...particle.props,
    style: {
      ...particle.props.style,
      top: top + 'px'
    }
  }
}
setParticle(particleCopy);