React中state已变更，但Line组件未重新渲染问题

问题原因 #

你添加Line组件时，传入的scale是当时params.scale的静态快照值，而非动态绑定的状态引用。后续params.scale更新时，已经存入content数组的Line组件props不会自动同步更新，所以组件不会重新渲染。

解决方案（推荐方案） #

不要在content中存储React元素，而是存储直线的原始数据，渲染时再动态传入最新的scale。这样每次scale变化，所有直线都会自动重新计算坐标。

修改代码步骤： #

1. 添加直线时存储数据对象：

// 替换原来的setContent调用
setContent([...content, {
  key: 'line' + svgRef.current.childElementCount,
  x1: 100,
  y1: 100,
  x2: 200,
  y2: 200
}])

2. 渲染SVG时动态生成Line组件：

<svg>
  {content.map(lineData => (
    <Line 
      key={lineData.key} 
      scale={params.scale} 
      x1={lineData.x1} 
      y1={lineData.y1} 
      x2={lineData.x2} 
      y2={lineData.y2} 
    />
  ))}
</svg>

为什么原方案无效？ #

React元素是不可变的，当你把<Line scale={params.scale} ... />存入content时，scale的值已经被固定为当时的params.scale数值。后续params.scale更新，content数组里的元素并没有变化（引用还是原来的），所以React不会触发这些Line组件的重新渲染。

内容的提问来源于stack exchange，提问作者Pavel Fedorovsky