ReactiveMap
I am having an issue with reactive map - i think i know why it's happening but i have no idea how to fix it.
I have the below code
I am trying to render it as such:
Now, it renders two components - however it renders two of the first mapped object. Which i don't understand at all. What am i doing wrong?
I have the below code
Setting up the Store (static map just for testing)
const tempCameraComponents: ReactiveMap<string, ICamera> = new ReactiveMap<string, ICamera>(
[
['left_eye_tracker', {
status: CameraStatus.LOADING,
type: CameraType.WIRELESS,
address: '192.168.0.204',
activeCameraSection: 'Left Eye',
}],
['right_eye_tracker', {
status: CameraStatus.LOADING,
type: CameraType.WIRELESS,
address: '192.168.0.232',
activeCameraSection: 'Right Eye',
}],
]
)
export const defaultState: IMdnsStore = {
connectedUser: '',
restClient: '',
camerasMap: tempCameraComponents
}
const [state, setState] = createStore<IMdnsStore>(defaultState)
export const cameras = createMemo(() => mdnsState().camerasMap)const tempCameraComponents: ReactiveMap<string, ICamera> = new ReactiveMap<string, ICamera>(
[
['left_eye_tracker', {
status: CameraStatus.LOADING,
type: CameraType.WIRELESS,
address: '192.168.0.204',
activeCameraSection: 'Left Eye',
}],
['right_eye_tracker', {
status: CameraStatus.LOADING,
type: CameraType.WIRELESS,
address: '192.168.0.232',
activeCameraSection: 'Right Eye',
}],
]
)
export const defaultState: IMdnsStore = {
connectedUser: '',
restClient: '',
camerasMap: tempCameraComponents
}
const [state, setState] = createStore<IMdnsStore>(defaultState)
export const cameras = createMemo(() => mdnsState().camerasMap)I am trying to render it as such:
const CameraHandler = () => {
const _cameras = cameras()
console.log('cameras:', _cameras.size)
return (
<Show
when={_cameras.size > 0}
fallback={
<div class="flex flex-col items-center justify-center w-full h-full">
<Text size="2xl" class="font-bold tracking-[0.10rem] text-[white]">
No cameras found
</Text>
</div>
}>
<For each={Array.from({ length: _cameras.size })}>
{() => {
createEffect(() => console.log('increment:', _cameras.values().next().value))
return <Camera {...(_cameras.values().next().value as ICamera)} />
}}
</For>
</Show>
)
}const CameraHandler = () => {
const _cameras = cameras()
console.log('cameras:', _cameras.size)
return (
<Show
when={_cameras.size > 0}
fallback={
<div class="flex flex-col items-center justify-center w-full h-full">
<Text size="2xl" class="font-bold tracking-[0.10rem] text-[white]">
No cameras found
</Text>
</div>
}>
<For each={Array.from({ length: _cameras.size })}>
{() => {
createEffect(() => console.log('increment:', _cameras.values().next().value))
return <Camera {...(_cameras.values().next().value as ICamera)} />
}}
</For>
</Show>
)
}Now, it renders two components - however it renders two of the first mapped object. Which i don't understand at all. What am i doing wrong?
