Javascript 在React中数组中的所有元素中更新相同的值

我面临一个问题。我正在画矩形点击和拖动。我将这些矩形存储在数组中。每当我在数组中按下新创建的矩形时，旧存储的矩形都会用最后按下的矩形更新。例如，假设我的数组（命名数据）包含的矩形为-[Rectangle 1，Rectangle 2]。现在，如果我添加第三个矩形，更新后的数组类似于-[矩形3，矩形3，矩形3]。 请告诉我哪里错了，帮我解决这个问题

//I am drawing rectangles in handleMouseMove function and updating the array in handleMouseUp. I am using var data = [] to store array

import React from 'react';

var rect = {};
var shape = {};
var data = [];

export default class MyCanvas extends React.Component {
    constructor(props) {
        super (props);

        this.state = {
            imageLink : 'some link',
            shapes : [],
            isDown : false,
        };

        this.handleClick = this.handleClick.bind (this);
        this.hanldeMouseMove = this.hanldeMouseMove.bind (this);        
        this.handleMouseDown = this.handleMouseDown.bind (this);        
        this.handleMouseUp = this.handleMouseUp.bind (this);        
    }

    componentDidMount() {
        const canvas = this.refs.canvas;
        const ctx = canvas.getContext ("2d");

        const img = this.refs.image;

        canvas.height = img.height;
        canvas.width = img.width;

        img.onload = () => {
            ctx.drawImage (img, 0, 0);
        }

        var rectX = canvas.offsetLeft;
        var rectY = canvas.offsetTop;

        canvas.addEventListener ('mousemove', (e) => {this.hanldeMouseMove (e, canvas, img)}, false);
        canvas.addEventListener ('mousedown', (e) => {this.handleMouseDown (e)}, false);
        canvas.addEventListener ('mouseup', () => {this.handleMouseUp(canvas)}, false);
    }

    hanldeMouseMove(e, canvas, img) {
        if (this.state.isDown) {
            rect.w = (e.pageX - canvas.offsetLeft) - rect.startX;
            rect.h = (e.pageY - canvas.offsetTop) - rect.startY ;

            const ctx = canvas.getContext ("2d");

            // Rectangles are drawn here
            ctx.clearRect(rect.startX, rect.startY, rect.w, rect.h);
            ctx.drawImage(img, 0, 0);
            ctx.strokeRect (rect.startX, rect.startY, rect.w, rect.h);

            shape = rect;
        }
    }

    handleMouseDown(e) {
        rect.startX = e.offsetX;
        rect.startY = e.offsetY;
        this.setState ({isDown : true});

    }

    // updating the array here
    handleMouseUp(canvas) {
        this.setState ({isDown : false});
        data.push(shape);
        console.log(data);
    }

    render() {
        return (
            <div className="container">
                <canvas ref = "canvas" />
                <img ref = "image" alt = "Link is Broken" src = {this.state.imageLink} className = "d-none" />
            </ div>
        );
    }
}

//我正在handleMouseMove函数中绘制矩形，并在handleMouseUp中更新数组。我使用var data=[]来存储数组
从“React”导入React；
var rect={}；
var shape={}；
var数据=[]；
导出默认类MyCanvas扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
imageLink:“某些链接”，
形状：[]，
伊斯敦：错，
};
this.handleClick=this.handleClick.bind（this）；
this.hanldeMouseMove=this.hanldeMouseMove.bind（this）；
this.handleMouseDown=this.handleMouseDown.bind（this）；
this.handleMouseUp=this.handleMouseUp.bind（this）；
}
componentDidMount（）{
const canvas=this.refs.canvas；
const ctx=canvas.getContext（“2d”）；
const img=this.refs.image；
canvas.height=img.height；
canvas.width=img.width；
img.onload=（）=>{
ctx.drawImage（img，0,0）；
}
var rectX=canvas.offsetLeft；
var rectY=canvas.offsetTop；
canvas.addEventListener（'mousemove'，（e）=>{this.hanldeMouseMove（e，canvas，img）}，false）；
canvas.addEventListener（'mousedown'，（e）=>{this.handleMouseDown（e）}，false）；
canvas.addEventListener（'mouseup'，（）=>{this.handleMouseUp（canvas）}，false）；
}
hanldeMouseMove（e、canvas、img）{
if（this.state.isDown）{
rect.w=（e.pageX-canvas.offsetLeft）-rect.startX；
rect.h=（e.pageY-canvas.offsetTop）-rect.startY；
const ctx=canvas.getContext（“2d”）；
//这里画的是矩形
ctx.clearRect（rect.startX、rect.startY、rect.w、rect.h）；
ctx.drawImage（img，0,0）；
ctx.strokeRect（垂直起始、垂直起始、垂直w、垂直h）；
形状=矩形；
}
}
手把手向下（e）{
rect.startX=e.offsetX；
rect.startY=e.offsetY；
this.setState（{isDown:true}）；
}
//在这里更新数组
手提袋（帆布）{
this.setState（{isDown:false}）；
数据推送（形状）；
控制台日志（数据）；
}
render（）{
返回(
);
}
}

rect有一个引用，它在数组中每次都被复制和更新。因此，数组中的所有元素都显示相同的元素

而不是

shape = rect;

你知道吗

shape = Object.assign({},rect);

---

数据对象应该处于您的状态，并且您必须记住React适用于不可变对象

 handleMouseUp(canvas) {
    var newDataArray = this.state.data.slice();    
    newDataArray.push(shape);   
    this.setState({data:newDataArray})  
 }  

this.state.data.slice（）创建数组的浅层副本，使其不可变

对于ES6，您还可以使用更好的方法，即

handleMouseUp(canvas) {
    this.setState(previousState => ({
        data: [...previousState.data, shape]
    }));
}

---

谢谢，成功了。但是为什么它不能和上面的一个一起工作呢？我的意思是，这两个对象之间的区别总是通过引用来表示的。正如我提到的，它只有一个引用，并且它用于所有元素。是的，我的错误。谢谢