React不会在状态和道具更改时重新渲染

Question

我正试图在React.js中创建一个非常简单的绘图。实际上，我只是将我创建的Vanilla js代码转换为React应用程序。您可以在FiddleJS上看到原始代码。

一切似乎都正常，但渲染点的组件并没有在道具更改时重新渲染。然而，它的道具正在改变(我在react dev工具中检查了它(。我正在使用自定义事件侦听器，这可能是错误的原因吗？

import React, { useEffect, useState} from "react";
const addPoint = ({points, setPoints}) => (event) => {
const newPts = points;
newPts.push([event.pageX, event.pageY]);
setPoints(newPts);
};
const handleMouseDown = (pts) => (event) => {
console.log(pts.points);
document
.getElementById("drawing")!
.addEventListener("mousemove", handleMouseMove(pts));
};
const handleMouseUp = (pts) => (event) => {
document
.getElementById("drawing")!
.removeEventListener("mousemove", handleMouseMove(pts));
};
const handleMouseMove = (pts) => (event) => {
addPoint(pts) (event);
};
// Does not re-render when the props change
function RenderPoints(props) {
return (
<svg id="drawing" height="400" width="450">
<g id="points" stroke="black" strokeWidth="3" fill="black">
{props.points.map((point, index) => {
return <circle cx={point[0]} cy={point[1]} r="3" key={index}/>;
})}
</g>
</svg>
);
}
export default function Contact() {
useEffect(() => {
document
.getElementById("drawing")!
.addEventListener("mousedown", handleMouseDown({points, setPoints}));
document
.getElementById("drawing")!
.addEventListener("mouseup", handleMouseUp({points, setPoints}));
return () => {
document
.getElementById("drawing")!
.removeEventListener("mousedown", handleMouseDown({points, setPoints}));
document
.getElementById("drawing")!
.removeEventListener("mouseup", handleMouseUp({points, setPoints}));
};
});
const [points, setPoints] = useState([[100, 100]]);
return (
<>
<div>Draw</div>
<RenderPoints points={points} />
</>
);
}

Answer 1

在addPoints函数中，将另一个元素推入同一个points数组。React在比较数组和对象时会进行浅层比较，这意味着它不会深入研究数组内容是否发生了变化——它只是检查状态变量(此处为points(是对同一数组的引用还是对不同数组的引用。

Array.prototype.push不创建新的数组，它只是将一个新元素推送到同一个数组中。因此，即使points的内容发生了变化，points仍然是同一个数组。这就是React不重新提交组件的原因。

要解决此问题，请执行以下操作：

const newPts = [...points, [event.pageX, event.pageY]]

这样每次都会创建一个新的数组，所以React现在会重新提交您的组件。