數組總是在每個元素中獲取最后一個值

Question

在我的循環中，我每次循環創建一個新變量並設置一個新值（顯然）

但是，當循環完成並在循環之外時，我會在console.log()中填充循環中的數組。 它使用最后一個元素的值記錄每個元素。

我嘗試使用.push()填充數組。

state = {
    dates: ['2019-02-04', '2019-02-05', '2019-02-06'],
    entry: {
        value1: undefined,
        value2: undefined,
        value3: {
            value3_1: undefined,
            value3_2: undefined
        },
        date: undefined
    }
}

functionToFillArray() {
    let entries = [],
        entry = this.state.entry;

        entry.value1 = 'value1';
        entry.value2 = 'value2';
        entry.value3 = {
            value3_1: 'value3_1',
            value3_2: 'value3_2'
        };

    this.state.dates.forEach((date, i) => {
        entry.date = date;

        entries.push(entry);
    });

    console.log(entries);
}

我期望的輸出是：

[
    {
        value1: 'value1',
        value2: 'value2',
        value3: {
            value3_1: 'value3_1',
            value3_2: 'value3_2'
        },
        date: '2019-02-04'
    },
    {
        value1: 'value1',
        value2: 'value2',
        value3: {
            value3_1: 'value3_1',
            value3_2: 'value3_2'
        },
        date: '2019-02-05'
    },
    {
        value1: 'value1',
        value2: 'value2',
        value3: {
            value3_1: 'value3_1',
            value3_2: 'value3_2'
        },
        date: '2019-02-06'
    }
]

我得到的值（總是相同的日期）：

[
    {
        value1: 'value1',
        value2: 'value2',
        value3: {
            value3_1: 'value3_1',
            value3_2: 'value3_2'
        },
        date: '2019-02-06'
    },
    {
        value1: 'value1',
        value2: 'value2',
        value3: {
            value3_1: 'value3_1',
            value3_2: 'value3_2'
        },
        date: '2019-02-06'
    },
    {
        value1: 'value1',
        value2: 'value2',
        value3: {
            value3_1: 'value3_1',
            value3_2: 'value3_2'
        },
        date: '2019-02-06'
    }
]

Answer 1

您的代碼在每次迭代中都會this.state.entry相同的this.state.entry對象，並將該單個對象引用一次又一次地推入數組，因此最后該數組確實包含多個條目，但所有條目都具有相同的對象引用。

總而言之， this.state.entry值（您似乎想像模板一樣使用）實際上沒有任何作用。 無論如何，您正在為其所有屬性分配新值。 因此，似乎沒有必要。

只需替換為：

let entry = this.state.entry;

與：

let entry = {};

現在， entry將是每次迭代中新創建的對象。

更新的問題-更新的答案

在對問題進行編輯之后，您只能一遍又一遍地將date屬性分配給同一對象。

原理保持不變。 現在替換為：

functionToFillArray() {
    let entries = [],
        entry = this.state.entry;
    entry.value1 = 'value1';
    entry.value2 = 'value2';
    entry.value3 = {
        value3_1: 'value3_1',
        value3_2: 'value3_2'
    };
    this.state.dates.forEach((date, i) => {
        entry.date = date;
        entries.push(entry);
    });
    console.log(entries);
}

...具有：

functionToFillArray() {
    let entries = this.state.dates.map((date, i) => {
        return {
            value1: 'value1',
            value2: 'value2',
            value3: {
                value3_1: 'value3_1',
                value3_2: 'value3_2'
            },
            date
        };
    });
    console.log(entries);
}

這樣，您可以在每次迭代中創建一個新對象。 首先初始化一個對象，然后覆蓋它的每個屬性是沒有好處的，因為那時您仍在使用單個對象。 每次迭代都需要一個新的。

請注意，這里的Array的map方法比forEach更有用，但與您的問題無關。

Answer 2

使用解構。

 const state = { dates: ['2019-02-04', '2019-02-05', '2019-02-06'], entry: { value1: undefined, value2: undefined, value3: { value3_1: undefined, value3_2: undefined }, date: undefined } }; function ToFillArray() { let entries = []; state.dates.forEach((date, i) => { const entry = { ...state.entry, value1: 'value1', value2: 'value2', value3: { value3_1: 'value3_1', value3_2: 'value3_2' }, date }; entries.push(entry); }); console.log(entries); } ToFillArray(); 

Answer 3

您不是在創建副本，而是在創建指向this.state.entry的鏈接，然后創建循環對象。 嘗試先創建一個副本。

...
this.state.dates.forEach((date, i) => {
        let entry = {...this.state.entry};
...

Answer 4

這是因為您總是引用相同的變量，而不是復制變量，修改狀態，而是嘗試以下操作：

let stateCopy= {...this.state};
let entry = stateCopy.entry

    entry.value1 = 'value1';
    entry.value2 = 'value2';
    entry.value3 = {
        value3_1: 'value3_1',
        value3_2: 'value3_2'
    };
    entry.date = date;

    entries.push(entry);

您可以參考本文以獲得更詳細的說明：）

同樣在這種特殊情況下，實際上並沒有必要在狀態下重用對象，因為每次都分配屬性