Array of refs - keeps extranuous values - need to reset/slice
Hi. I have an array of refs I store in a signal like this. Refs are used in another component to scrollIntoView them.
<h2
ref={(el) =>
props.setRefs((p) =>
[...p, el]
)
}
style={{ 'font-family': font() }}
class='snap-center text-textColor font-bold'
>
Text
</h2>
The number of elements in the ref can vary. If the user clicks one button then it might have three refs in the array/signal. Another button might have 11 refs in the array/signal.
The signal is originally an empty array but never resets to an empty array. Each time the component loads it overwrites the previous values. So if previously there were 11 refs and now there are three refs then the first three refs will be overwritten in the signal. The remaining eight refs will be from the previous time the component was loaded.
That doesn't seem to cause problems but sometimes if I go from having 11 refs to two refs and finally to 11 refs it will only update the first two refs in the signal and then I get error message
Uncaught TypeError: (intermediate value)(...) is undefined when clicking a button to scrollIntoView for ref 3-11. These nine refs don't exist with the current render.
Not sure why it stops updating the signal with all the new refs?3 Replies
I should probably change the title to "ref stops updating signal"
You mean the refs are not removed. Use onCleanup to do so yourself.
Hi Alex yes I need to clear them out somehow or just keep the relevant ones. I'm doing more testing and the array of refs just keeps growing. Sometimes it has the right refs at the beginning of the array, sometimes at the end. Not exactly sure what's going on but I definitely need just the refs from the current render(if that's the right word).
Tried this in the child and parent component:
onCleanup(() => {
console.log('in cleanup')
props.setRefs([])
})
And I still get a giant list of refs as time goes on. I don't see the console log.