Javascript 当组件在函数（挂钩）之外定义时，React不会更新svg中的多边形

Hello当我想在SVG内渲染阵列多边形时，仅当组件在组件内定义时，它才起作用：

这项工作：

function Polygons() {
  const Polygon1 = ({ points, key }) => {
    return <polygon key={key} stroke="blue" points={points} />;
  };

  const [polygons, setPolygons] = useState([]);
  return (
    <div className="App">
      <div>
        <svg width="500px" height="500px" version="1.1">
          {polygons.map((polygon, i) => {
            return <Polygon1 key={`polygon-${i}`} points={polygon.points} />;
          })}
        </svg>
      </div>
      <button
        onClick={() => {
          setPolygons([...polygons, { points: [10, 10] }]);
        }}
      >
        Add Polygon
      </button>
      <button
        onClick={() => {
          if (!polygons.length) {
            alert("Please add first Polygon");
            return;
          }
          const lastPolygon = Object.assign({}, polygons[polygons.length - 1]);
          lastPolygon.points.push([Math.random() * 500, Math.random() * 500]);
          const newPolygons = [...polygons];
          newPolygons[newPolygons.length - 1] = lastPolygon;
          setPolygons(newPolygons);
        }}
      >
        Add Point
      </button>
    </div>
  );
}

函数多边形（）{
常量Polygon1=（{points，key}）=>{
返回；
};
const[polygons，setPolygons]=useState（[]）；
返回(
{polygons.map（（polygon，i）=>{
返回；
})}
{
集合多边形（[…多边形，{points:[10,10]}]）；
}}
>
增加多边形
{
如果（！polygons.length）{
警告（“请添加第一个多边形”）；
返回；
}
const lastPolygon=Object.assign（{}，polygons[polygons.length-1]）；
lastPolygon.points.push（[Math.random（）*500，Math.random（）*500]）；
常量newPolygons=[…多边形]；
newPolygons[newPolygons.length-1]=lastPolygon；
setPolygons（newPolygons）；
}}
>
加点
);
}

这是行不通的：

const Polygon1 = ({ points, key }) => {
  return <polygon key={key} stroke="blue" points={points} />;
};

function Polygons() {
  const [polygons, setPolygons] = useState([]);
  return (
    <div className="App">
      <div>
        <svg width="500px" height="500px" version="1.1">
       ....

constpolygon1=（{points，key}）=>{
返回；
};
函数多边形（）{
const[polygons，setPolygons]=useState（[]）；
返回(
....

有人能给我解释一下这种行为以及我如何解决这个问题吗？我不想在另一个组件中定义组件。

---

我创建了一个codesandbox，因此您可以看到问题：

您在第二个示例中有一个错误：“Polygon1:

键

不是道具。尝试访问它将导致返回

未定义的
。”---我认为您不需要
Polygon1
组件中的密钥。好的，谢谢。但这并不能解决问题…这就是为什么我没有回答；）不要从地图中移除密钥。一旦放回，多边形将进行渲染。我建议阅读更多关于。