I have a React application showing a real time updated chart which works well when receives data from event-based WebSocket. Now I need to modify the app with a new data source. I have an aysnc function to get a batch of data in an interval.
kinesisReadInterval.current = setInterval(async () => {
const recordsResponse = await kinesisRef.current.getRecords({ ShardIterator: shardIterator }).promise();
recordsResponse.Records.forEach(record => {
try {
const dataObj = JSON.parse(record.Data.toString('utf-8'));
spectrumAnalyzerRef.current.metaDataHandler(dataObj);
} catch (jsonError) {
spectrumAnalyzerRef.current.binaryDataHandler(record.Data.buffer);
}
});
shardIterator = recordsResponse.NextShardIterator;
if (!shardIterator || !kinesisConected.current) {
clearInterval(intervalId); // Stop interval if conditions are not met
}
}, 1000);
The recordsResponse.Records contains a batch of records and I want to update the chart based on these records one by one. From my logs, I can see that the binaryDataHandler() which will call appendRange() ran successfully for each record. However, the chart only redraws for the last record of the recordsResponse.Records. I have tried to store the recordsResponse.Records in a state variable and loop to update the chart later, but still got the same result. I am not sure whether it’s chart related issue or React rendering issue. Do you have any idea?
- Quyen Sy asked 3 months ago
- last active 3 months ago