拖动时具有相同名称的项目生成相同的键

Question

我需要能够拥有两个相同的项目，同时它们在板内拖动时不会重复。但是当我拖入板中存在的项目时，它会记录“移动”。

它应该添加另一个具有不同键的同名项目。我找不到我的错误，请帮忙。

这是我的代码

import { React, useState } from "react";
import { useDrop } from "react-dnd";
import { ItemTypes } from "../ItemTypes";
import Items from "./Items";

const Board = () => {
    const [components, setComponents] = useState([]);

    const onDelete = (id) => {
        console.log(components);
        console.log(id);
        setComponents(components.filter((component) => component.key !== id));
    };

    const [, drop] = useDrop(() => ({
        accept: ItemTypes.COMPONENT,
        drop: (item) => {
            console.log(item.name, item.key);
            if (item.key === undefined) {
                const { nanoid } = require("nanoid");
                const itemKey = { key: nanoid(16) };
                const newItem = Object.assign(item, itemKey);
                setComponents((components) => [...components, newItem]);
                console.log("add");
            } else {
                console.log("moving");
            }
        },
    }));

    return (
        <div ref={drop} className="board">
            <Items components={components} onDelete={onDelete} />
        </div>
    );
};

export default Board;

这是组件（外部，拖入时应该转换为项目）

import React from "react";
import { useDrag } from "react-dnd";
import { ItemTypes } from "../ItemTypes";

const Component = ({ component }) => {
    const [, drag] = useDrag(
        () => ({
            type: ItemTypes.COMPONENT,
            item: component,
        }),
        []
    );

    return (
        <div ref={drag} className="component">
            <h4>{component.name}</h4>
        </div>
    );
};

export default Component;

这是项目（在当前板）

import React from "react";
import { useDrag } from "react-dnd";
import { ItemTypes } from "../ItemTypes";
import { FaTimes } from "react-icons/fa";

const Item = ({ component, onDelete, key, left, top }) => {
    const [{ isDragging }, drag] = useDrag(
        () => ({
            type: ItemTypes.COMPONENT,
            item: component,
            collect: (monitor) => ({
                isDragging: monitor.isDragging(),
            }),
        }),
        [key, left, top]
    );

    if (isDragging) {
        return <div ref={drag} />;
    }
    return (
        <div ref={drag} className="item">
            <h4>
                {component.name}
                {<FaTimes onClick={() => onDelete(component.key)} />}
            </h4>
        </div>
    );
};

export default Item;

Answer 1

所以问题是我们如何正确使用Object.Assign()。它至少做 2 个工作。

更新现有对象。 Object.assign(item, itemKey); 更新项目键。
创建一个新对象Object.assign({},item, itemKey);这将创建一个全新的对象，因为它将旧属性合并到一个空对象中。

您可以改用展开运算符以避免混淆。 const newItem = {...item, itemKey}; 本来可以的。

拖动时具有相同名称的项目生成相同的键

Items with same name generating same keys when dragging

javascript

reactjs

react-dnd