Let's say I have an array of objects who's state I am interested in.
E.g. some data of the form:
const data = [{
A: a,
B: b,
C: c,
D: d
},...]
Let's assume that C and D are high cost query items, so for speed I load the page with A and B. Then, once I have A and B I go and fetch C and D items.
I fetch all data again every ... seconds, so that I have the most up to date values.
fetchAB(); // Called every x seconds
fetchCD(); // Called every y seconds
I need to map these values to a component, which should update and show the most up to date values:
const SomeComponent = () => {
const [data, setData] = useState([]);
// Some fetch logic
return(
{
data.map((d, idx) => {
return (
<key={idx}>
<td>{d.A}</td>
<td>{d.B}</td>
<td>{d.C}</td>
<td>{d.D}</td>
</>
)}
)}
)
}
How do I go about updating the state of an array of mapped objects which is being updated from two (or more) sources?
I found the best way to accomplish this was to convert my array of objects into an object of objects.
This way I can use direct mapping for previous states.
E.g.
// Displaying the data structure, not actually a const. Data is returned from an API fetch.
const data = {
1 : {
A: a,
B: b,
C: c,
D: d
},
2: {
A: a,
B: b,
C: c,
D: d
},...
}
Then I can update the state like so:
var dataCD = fetchCD();
// Returns an object with id as the key, with "C, D" values.
var keys = Object.keys(dataCD);
for (var key in keys){
data[key] = {
...data[key], // Include all previous data values in the object
C: dataCD[key]["C"],
D: dataCD[key]["D"]
}
}
The same logic must be implemented for all other methods updating the object state.