Hello,
I’ve the following problem : in my Grids component i’ve a method that return a multidimensional array and i’d want to store any multidimensional array recomputed in a separate list…the problem is that when i’m using my useState() declared in this way const [listGrid,setListGrid] = useState<any[]>([]) only the last element is save repeatedly in the array list. This is the code of interested part :
const [listGrid,setListGrid] = useState<any[]>([]);
const grid= initGrid(); //initialise a new grid.
const disableButtonHandler = ():void => {
const cloneGrid =[...grid]
console.log(cloneGrid===grid)//are no the same!!
setListGrid(prevGrid=>[...prevGrid,cloneGrid]);
};
this is the snapshot of my list with the grids saved:
It is difficult to understand what you want here. But, some thoughts…
const cloneGrid =[...grid]
This does not clone your grid, unless you want to call it a shallow clone. The reference to cloneGrid will be cloned, but since the array is an array of reference types, those elements in the grid will be the same. To do a true clone of an array of arrays of arrays, you’re going to have to get more complicated than that.
console.log(cloneGrid===grid)//are no the same!!
Correct, they are different references to the top level array. But that references in those are all the same. If you change grid[0]0], the corresponding element in cloneGrid will also change.
setListGrid(prevGrid=>[...prevGrid,cloneGrid]);
What is this meant to do? What I see is making a shallow clone of prevGrid and adding on cloneGrid, essentially concatenating the two. Maybe that is what you want. But this looks like a similar pattern for merging objects so it caught my eye as a possible misunderstanding.
Hello,
Thanks for answering. Basically, i’d want to create a list with all new grid computed…but the array, being multidimensional, cloned only the first, the second inside still remain again the same. I wanted to find a solution to create an array of the grids already computed as a list. Currently when i push inside the new array the old grid processed remain all the same so basicaly inside the list only the current value of the array useState() is stored.
i had thought some solution like this :
But if you are trying to clone the array or arrays, then you can google “JavaScript deep clone”. You will find various solutions.
The most obvious solution would be to recursively go through the data structure and copy each element. You could also do it iteratively, but that gets a little messy. But actually, since you know the depth, that could actually work.
There are also prepackaged deep cloners, like lodash’s deepClone.
const cloneGrid = grid.map(valRow=> [...valRow]);
This would work, if you were only two deep. But isn’t it three deep? I think you need one more layer of nesting, if my math is right. You need to keep going until you hit primitive values. All reference types must be duplicated.
basically, a function generate a multidimensional array, every time that i click on the button the function is recalled for processing again the grid…so every time i click the button in addition to change the grids i want also to save the current state (current configuration of the grid). Therefore to do that i want to use a list for saving these currents state. now is clear?anyway it has only two depth,so work!..thank you
