S
SolidJS•2y ago
D0Z

updating nested object not triggering update

Heya I'm fairly new to SolidJS (You might have already seen some of my previous post of me strugglin' :D) I'm trying to update the state of a nested object in a store but it doesn't seem to trigger an update on my component. here is the method I use to update (it's declared in a context provider) I'm not sure if I'm using produce well
const setOneFeature: ContextState[1]['setOneFeature'] = async (feature) => {
const layerIndex = state.layers.findIndex(
(item) => item && item.id === feature.layer
)
if (layerIndex === -1) {
throw new Error('layer is undefined 💩')
}
setState(
'layers',
layerIndex,
'features',
produce((features) => {
if (!features) {
features = [feature]
} else {
const prevFeature = features.find((item) => item.id === feature.id)
if (prevFeature) {
_.merge(prevFeature, feature)
} else {
features.push(feature)
}
}
})
)
}
const setOneFeature: ContextState[1]['setOneFeature'] = async (feature) => {
const layerIndex = state.layers.findIndex(
(item) => item && item.id === feature.layer
)
if (layerIndex === -1) {
throw new Error('layer is undefined 💩')
}
setState(
'layers',
layerIndex,
'features',
produce((features) => {
if (!features) {
features = [feature]
} else {
const prevFeature = features.find((item) => item.id === feature.id)
if (prevFeature) {
_.merge(prevFeature, feature)
} else {
features.push(feature)
}
}
})
)
}
10 Replies
thetarnav
thetarnav•2y ago
this won't work but the mutations that happen below, they look fine. Not sure exackly what _.merge does but if it mutates the object on the left with differences from the right, then thats fine
D0Z
D0ZOP•2y ago
it's a method from lodash to merge objects https://lodash.com/docs/#merge
thetarnav
thetarnav•2y ago
looks like reconcile
D0Z
D0ZOP•2y ago
I did this in my component to check if it update is this right ?
const [store] = useLayer()

createEffect(() => {
console.log('storeUpdate', store)
})
const [store] = useLayer()

createEffect(() => {
console.log('storeUpdate', store)
})
oh ? I checked the api but couldn't understand quite well reconcile
thetarnav
thetarnav•2y ago
or not, becasue it adds new keys this won't listen to anything You could do this
const [store] = useLayer()

createEffect(() => {
console.log('storeUpdate', JSON.stringify(store, null, 2))
})
const [store] = useLayer()

createEffect(() => {
console.log('storeUpdate', JSON.stringify(store, null, 2))
})
if you move this one key up, it should help with no features case
setState(
'layers',
layerIndex,
produce(layer => {
if (!layer.features) {
layer.features = [feature]
} else {
...
}
})
)
setState(
'layers',
layerIndex,
produce(layer => {
if (!layer.features) {
layer.features = [feature]
} else {
...
}
})
)
D0Z
D0ZOP•2y ago
alright it seems to work now I need to find why the component won't update ^^' I'm using a fairly complicated setud with solid-map-gl and trying to update a geojson layer oh nice thanks for the tip can I continue to chain up argument after a produce, for example
setState(
'layers',
layerIndex,
produce(layer => {
if (!layer.features) layer.features = []
},
'features',
produce(...)
)
setState(
'layers',
layerIndex,
produce(layer => {
if (!layer.features) layer.features = []
},
'features',
produce(...)
)
thetarnav
thetarnav•2y ago
no use a separate store setter after it The last param is for setting the value, the ones before for deciding on the path to the property
D0Z
D0ZOP•2y ago
alright Is there any way I can thank you like buy you a coffee or something ? you've helped me quite a few times already
thetarnav
thetarnav•2y ago
thanks but I don't have anything like that setup I'm answering posts mostly for fun anyway
D0Z
D0ZOP•2y ago
Alright then you have my most sincere thanks for your time 😄 and I might come here again soon x)
Want results from more Discord servers?
Add your server