Реагировать - проблема с функцией, возвращающей одинаковые значения, даже если переданные аргументы отличаются

Question

У меня есть функция, которая создает массив данных. Он читает:

const createMockData = () => {
    /* Please do not refactor this function */
    return [
        createRowData({species: 'Robot', name: 'T-100', Icon: Android, description: "Likes long walks, walking over the bones of it's enemies"}),
        createRowData({species: 'Bug', name:'Barry', Icon: BugReport, description: "Likes long walks, and creating problems in all your code"}),
        createRowData({species: 'Rabbit', name:'Roger', Icon: Pets, description: "Likes long walks and getting to know the inner you"}),
        createRowData({species: null, name: null, Icon: null, description: null}),
    ]
};

Функция 'createRowData' является внешним js-файлом, который читает:

const defaultMock = {
    species: 'Human',
    name : 'Jon Snow',
    icon: AcUnit,
    description: 'You know nothing, Jon Snow.'
};


const createRowData = ({name, species, Icon, description}) => {
    let rowData = defaultMock;
    rowData.id = UUID();
    rowData.name = name ? name : rowData.name;
    rowData.species = species ? species: rowData.species;
    rowData.icon = Icon ? Icon : rowData.icon;
    rowData.description = description ? description : rowData.description;

    return rowData

}


export { createRowData }

Когда я вызываю 'createMockData', он всегда заполняет возвращенный массив 3-й строкой 'Кролик Роджер'. Так что-то вроде этого:

0: {species: "Rabbit", name: "Roger", icon: {…}, description: "Likes long walks and getting to know the inner you", id: "6be8c1e0-0070-44cd-a17e-c68097ebfcbd"}
1: {species: "Rabbit", name: "Roger", icon: {…}, description: "Likes long walks and getting to know the inner you", id: "6be8c1e0-0070-44cd-a17e-c68097ebfcbd"}
2: {species: "Rabbit", name: "Roger", icon: {…}, description: "Likes long walks and getting to know the inner you", id: "6be8c1e0-0070-44cd-a17e-c68097ebfcbd"}
3: {species: "Rabbit", name: "Roger", icon: {…}, description: "Likes long walks

Почему это?

Answer 1

Это из-за строки

let rowData = defaultMock;

Эта строка просто устанавливает rowData на defaultMock. Все присвоения позже произойдут defaultMock. Это означает, что вы изменяете макет по умолчанию при каждом вызове createRowData.

. То, чего вы хотите добиться, - это создать копию defaultMock, назначить ее на rowData и изменить эту копию. Вы можете сделать это:

let rowData = {...defaultMock};