将对象结果复制到引用问题

Question

我试图通过这样做来创建现有对象的副本。不知何故，我总是通过引用而不是作为一个新对象创建一个副本。

    const fieldSchema = [
        {
            addressType: '',
            addressSuffix: '',
            addressStreet: '',
            addressPostalcode: '',
            addressLocation: '',
            addressCountry: 'Germany',
        },
    ];

    //State
    const [inputFields, setInputFields] = useState(fieldSchema);


    const handleMenuItemCopy = (event, index) => {
        const fields = [...inputFields];
        console.log('Existing Item(s):', inputFields);
        const duplicatedField = fields.splice(index, 1);
        console.log('Copied Item:', duplicatedField);

        const newFields = [...inputFields, ...duplicatedField];
        console.log(newFields);
        setInputFields(newFields);
    };


return (
    <>
     {inputFields.map((inputField, index) => (
         ...
         <TextField
            id={`addressPostalcode-${index}`}
            name="addressPostalcode"
            variant="outlined"
            label="Postleitzahl"
            className={classes.input}
            onChange={(event) => handleInputChange(event, index)}
            value={inputField.addressPostalcode}
         ></TextField>
         ...
     }

     <Button
       classes={{
         root: classes.buttonBase,
         startIcon: classes.buttonStartIcon,
       }}
       variant="outlined"
       onClick={(event) => handleMenuItemCopy(event, index)}
    >
      Duplicate Fields
    </Button>
  </>
)

1. 在任何输入中输入一些数据
2. 单击右上方的按钮
3. 选择重复rn（重复）
4. 编辑副本的一个字段
5. 更改也会立即在第一个对象字段集中执行操作。

Answer 1

您需要复制实际的对象。splice并不这样做，它只是将它从数组中移除（我认为您不想这样做）。

这将在index处复制对象，并在结尾处添加副本：

const handleMenuItemCopy = (event, index) => {
    // Use the callback form
    setInputFields(fields => {
        // Copy the array; the objects within it are still shared
        fields = [...fields];
        // Copy the one that's at `index` and push at the end
        fields.push({...fields[index]});
        // Return the new array
        return fields;
    });
};

这是一个简单的副本，这通常是你所需要的，但如果你需要做一个深层副本，请看这个问题的答案。