useEffect调用的for循环中数组添加JSON元素重复问题求助

问题原因 #

你遇到的问题根源是对象引用机制：candleJsonData是在循环外部声明的单个对象，每次循环只是修改该对象的属性值，而非创建新对象。数组candleRealTimeDataQueue中推入的都是这个对象的引用，最终数组里的所有元素指向同一个对象，自然会显示最后一次循环修改后的结果。

修复方案 #

方案1：循环内创建新对象（推荐）

将candleJsonData的声明移到循环内部，每次迭代生成独立的新对象：

const getDataFromAPI = async () => {
    let apiDataFetch = await fetch('https:/api/endpoint');
    let response = await apiDataFetch.json();    

    for (var i = 0; i < 4; i++) {
        // 每次循环创建全新的对象
        let candleJsonData = {};
        tempDateTime = new Date(parseInt(response[i][0]));
        candleJsonData['time'] = tempDateTime.toString();
        
        candleJsonData['open'] = parseFloat(response[i][1]);
        candleJsonData['high'] = parseFloat(response[i][2]);
        candleJsonData['low'] = parseFloat(response[i][3]);
        candleJsonData['close'] = parseFloat(response[i][4]);

        console.log(candleJsonData);
        candleRealTimeDataQueue.push(candleJsonData);
        console.log(candleRealTimeDataQueue);
    }
}

方案2：推入对象副本

如果需要保留外部声明的candleJsonData，可以在推入数组时创建对象的浅拷贝（展开语法适合基础属性场景）：

const getDataFromAPI = async () => {
    let apiDataFetch = await fetch('https:/api/endpoint');
    let response = await apiDataFetch.json();    

    for (var i = 0; i < 4; i++) {
        tempDateTime = new Date(parseInt(response[i][0]));
        candleJsonData['time'] = tempDateTime.toString();
        
        candleJsonData['open'] = parseFloat(response[i][1]);
        candleJsonData['high'] = parseFloat(response[i][2]);
        candleJsonData['low'] = parseFloat(response[i][3]);
        candleJsonData['close'] = parseFloat(response[i][4]);

        console.log(candleJsonData);
        // 推入当前对象的副本，避免引用同一对象
        candleRealTimeDataQueue.push({...candleJsonData});
        console.log(candleRealTimeDataQueue);
    }
}

补充说明 #

• 方案1逻辑更直观，从根源避免了引用问题，适合你的场景；
• 方案2的展开语法是浅拷贝，若对象包含嵌套属性，需使用深拷贝（如JSON.parse(JSON.stringify(candleJsonData))），但你的数据都是基础类型，浅拷贝足够。

内容的提问来源于stack exchange，提问作者AlphaParticle