对于从useEffect调用的循环，无法将JSON元素推送到数组内部

Question

我有一个未正确更新的数组candleRealTimeDataQueue。请找到以下代码：

let candleCurrentJSONDataWS = null;
var candleRealTimeDataQueue = [];
let tempDateTime = null;
let candleJsonData = {};

useEffect(() => {
getDataFromAPI();
}, []);
...
const getDataFromAPI = async () => {
let apiDataFetch = await fetch('https:/api/endpoint');
let response = await apiDataFetch.json();    // data from api obtained correctly
// total 4 values

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); // this correctly prints different 
// data for each different i
candleRealTimeDataQueue.push(candleJsonData);
console.log(candleRealTimeDataQueue);   // PROBLEM is here: At the end
// candleRealTimeDataQueue array all
// have SAME elements. Its wrong. All
// 4 elements are of i = 3
}
}

问题是在最后candleRealTimeDataQueue有4个元素，并且所有元素都是相同的。这不应该发生，因为我正在for循环中的candleRealTimeDataQueue数组中推送DIFFERENTcandleJsonData元素。请帮忙。

Answer 1

我认为这里的问题是重用candleJsonData对象。当您运行candleRealTimeDataQueue.push(candleJsonData)时，您正在将对candleJsonData的引用推送到candleRealTimeDataQueue中。因此，在循环的最后，您有四个对candleRealTimeDataQueue中相同对象的引用。由于您一次又一次地修改同一个candleJsonData对象，所以当您记录它时，您只会在队列中看到四个相同的json数据，并且所有四个元素都是i = 3。

相反，您应该在循环中创建新的candleJsonData对象。所以类似的东西

for (var i = 0; i < 4; i++) {
tempDateTime = new Date(parseInt(response[i][0]));
let candleJsonData = {}
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]);
candleRealTimeDataQueue.push(candleJsonData);
}

Answer 2

这是因为candleJsonData变量在外部声明，所以最新的值将覆盖以前的值。在face中不需要那个变量，它可以直接推入数组。

var candleRealTimeDataQueue = [];
React.useEffect(() => {
getDataFromAPI().then((data) => {
for (let i = 0; i < 4; i++) {
candleRealTimeDataQueue.push({
time: new Date(parseInt(data[i][0])).toString(),
open: parseFloat(data[i][1]),
low: parseFloat(data[i][3]),
close: parseFloat(data[i][4]),
});
}
});
return () => {
// do clean up here
};
}, []);
const getDataFromAPI = () => {
return fetch('https:/api/endpoint');
};