SolidJS•10mo ago

Remove element from store not working

I'm trying to remove an element from a reactive store based on the index. I've tried versions of this but I keep getting an error telling me "Cannot mutate a Store directly":

props.setMyFilter(i(),reconcile(props.myFilters.splice(i(),1)))
props.setMyFilter(reconcile(props.myFilters.splice(i(),1)))

props.setMyFilter(i(),reconcile(props.myFilters.splice(i(),1)))
props.setMyFilter(reconcile(props.myFilters.splice(i(),1)))

I've tried both <For> and <Index> I've also tried something like props.setMyFilter(i(),undefined) but this does not result in any change in the DOM, but it does log an error because it is trying to render a element from the store that is no longer there.

Uncaught TypeError: Cannot read properties of undefined (reading 'description')

Uncaught TypeError: Cannot read properties of undefined (reading 'description')

3 Replies

Martnart•10mo ago

props.myFilters.splice(i(),1)

props.myFilters.splice(i(),1)

Splice mutates an array in-place that's why you get the error. You'll have to go with something like props.setMyFilter(i(),undefined) however this is not producing the result you expect. Imagine an Array: [0, 1, 2, 3] with the way you're calling it, it would be (i = 2) [0, 1, undefined, 3]. What you really want, I'm assuming, is [0, 1, 3]. Try

props.setMyFilter(
  (items) => items.filter((_, index) => index !== i())
)

props.setMyFilter(
  (items) => items.filter((_, index) => index !== i())
)

Or if you prefer this:

props.setMyFilter((items) => [
  ...items.slice(0, i()),
  ...items.slice(i() + 1),
 ])

props.setMyFilter((items) => [
  ...items.slice(0, i()),
  ...items.slice(i() + 1),
 ])

FjordWarden•10mo ago

Oh ok, thx for your help!

mdynnl•10mo ago

or setMyFilter(produce(v => v.splice(i(), 1)))

Gaming

Programming

Remove element from store not working