reactjs - React .map 每次更新时都会渲染整个数组并导致重复

Question

你好，

我正在尝试将每个对象数组映射到 <Label>渲染方法中的组件。单击“添加注释”会将评论对象添加到 <ToolsContainer> 的状态数组中成分。更新 <ToolsContainer> 后状态数组，它对<ImageContainer>做一个回调函数获取值然后更新 <ImageContainer>自己的状态数组。

更新后，我映射了<ImageContainer>的状态数组到 <Label>有效的组件，但它不是我希望它的行为方式。问题是，每当我添加另一个“注释”时，它都会呈现数组中的所有内容，即使我使用的是 uuid，也会导致重复。

此处演示:https://codesandbox.io/s/lvm1n7w89

• 如何使用:
  1. 点击获取屏幕截图
  2. 单击下面的任何一个屏幕截图
  3. 点击添加注释
  4. 您可以拖动注释

代码如下:ToolsContainer.js

import React, { Component } from 'react';
import Button from '../../components/UI/Button/Button'
import uuid from "uuid";

class ToolsContainer extends Component {
    state = {
        isAddingAnnotation: false,
        commentArray: [],
        comment: "",                                                              
        labelCount: 0
    }
    addCommentHandler = () => {
        let comment = {
            uuid: uuid.v4(),
            value: "Insert comment here"
        }
        this.setState({
            commentArray: [...this.state.commentArray, comment]
        }, () => {
            console.log("[ToolsContainer][addCommentHandler] " + this.state.commentArray)
            this.props.getCommentsHandler(this.state.commentArray)
        })

    }
    render() {
        return (
            <div className="pure-g">
                <Button gridClass={"pure-u-4-24"} buttonName={"Add Annotation"} onClick={() => this.addCommentHandler} />
            </div>

        )
    }
}

export default ToolsContainer;

ImageContainer.js

import React, { Component } from 'react';
import "./ImageContainer.css";
import { Stage, Layer, Image, Tag, Text, Label } from 'react-konva';
import ToolsContainer from '../ToolsContainer/ToolsContainer';

class ImageContainer extends Component {
    state = {
        showImageContainer: true,
        canvasHeight: 0,
        canvasWidth: 0,
        canvasImageUrl: "",
        image: null,
        commentsArray: [],

    }

    componentDidMount() {
        let stage = this.refs.stage
        const imgObj = new window.Image();
        imgObj.src = this.props.selectedImageURI
        imgObj.onload = () => {
            this.setState({ image: imgObj })
            this.setState({ canvasWidth: imgObj.width, canvasHeight: imgObj.height });
            let canvasImageUrl = stage.toDataURL();
            this.setState({ canvasImageUrl: canvasImageUrl })
        }


    }

    getLabelCount = (count) => {
        this.setState({ labelCount: count })
    }

    displayContainerHandler = () => {
        this.props.showImageContainer(!this.state.showImageContainer)
    }

    downloadImageHandler = () => {
        let a = document.createElement('a');
        a.href = this.state.canvasImageUrl.replace("image/png", "image/octet-stream");
        a.download = 'shot.png';
        a.click();
    }

    onDragEnd(event) {
        console.log(event.target)
    }

    handleDelete = comment => {
        const commentsArray = this.state.commentsArray.filter(c => c.uuid !== comment.uuid);
        this.setState({ commentsArray });
    };

    getCommentsHandler = (comments) => {
        console.log("[ImageContainer][getCommentsHandler] " + comments)
        this.setState({
            commentsArray: [...this.state.commentsArray, ...comments]
        }, () => {
            console.log("[ImageContainer][getCommentsHandler] " + this.state)
        })
    }


    render() {
        return (
            <div className="ImageContainer" >
                <button className="ImageContainer-close-button " onClick={this.displayContainerHandler}>[x]</button>
                <Stage ref="stage" height={this.state.canvasHeight * .5} width={this.state.canvasWidth * .5} >
                    <Layer>
                        <Image image={this.state.image} scaleX={0.5} scaleY={0.5} />
                        {this.state.commentsArray.map(comment => (
                            <Label key={comment.uuid} draggable={true} x={150} y={150}>
                                <Tag
                                    fill="black"
                                    pointerWidth={10}
                                    pointerHeight={10}
                                    lineJoin='round'
                                    shadowColor='black'
                                />

                                <Text
                                    text={comment.value}
                                    fontFamily='Calibri'
                                    fontSize={18}
                                    padding={5}
                                    fill='white'
                                />

                                <Text
                                    text="[x]"
                                    fontFamily='Calibri'
                                    fontSize={18}
                                    x={170}
                                    fill='black'
                                    onClick={() => this.handleDelete(comment)}
                                />
                            </Label>
                        ))}

                    </Layer>
                </Stage>
                <ToolsContainer getCommentsHandler={comments => this.getCommentsHandler(comments)} />
                <button className="pure-button" onClick={() => this.downloadImageHandler()}>Download</button>
            </div>
        )
    }
}
export default ImageContainer;

对于那些想知道我正在为这个项目使用 react-konva 的人。非常感谢任何帮助。

编辑

拖动注释会显示重复项

Answer 1

您的问题出在这一行:

getCommentsHandler = comments => {
  console.log("[ImageContainer][getCommentsHandler] " + comments);
  this.setState(
    {
      commentsArray: [...this.state.commentsArray, ...comments]  // This is the problematic line
    },
    () => {
      console.log("[ImageContainer][getCommentsHandler] " + this.state);
    }
  );
};

当您像以前那样使用扩展运算符时，您会获取现有数组内容并将所有接收到的数据附加到它，如下所示:

const a = [1,2];
const b = [2];
const b = [...a, ...b] // b === [1,2,2]

您需要将标有注释的行更改为如下所示:

commentsArray: [...comments]