This is a simple example:
const [objs,setObjs] = useState([...MyArrayOfObjects]);
const [cachedObjs,setCachedObjs] = useState({});
const update_cache = function(key,obj){
let co = Object.assign({},cachedObjs);
co[key] = obj;
setCachedObjs(co);
}
return(
objs.map((o,idx)=>{
<thing cache_function={update_cache} key={etc...}/>
})
)
My rendered "things" do some calculations etc and what I would like to do is use the function update_cache to store those calculations... however it seems as though I only end up with the key => obj value of the last looped object in my array... e.g; If I print my cachedObjs in the console I only get the key of the last object in the array
(with its calculated value).
Inside the "thing" component:
const update_parent = function(){
properties.update_cache('myUniqueKey',{foo:'bar'})
}
useEffect(()=>{
if(calculations_done){
update_parent()
}
},[]);
I'm assuming the "things" are referencing the cachedObjs at its initial state and overwriting at each iteration... is there a way to avoid this?
