setStore odd creation behavior

Hey there team! Hope you are all well.

I'm experiencing some very odd behaviour around stores and was wonding if I could get some input from the community.

I am making a very basic to do app, just to play around a little bit with some of the primitives solid has. I'm pretty familiar with soildjs and have built several basic webapps with it so far.

In my todo app I have created a store

const [tasks, setTasks] = createStore<item[]>([{ name: "Exsist", note: "" }])

const [tasks, setTasks] = createStore<item[]>([{ name: "Exsist", note: "" }])

and can update tasks happily

setTasks(task => task.name === name, "completed", completed => !completed)

setTasks(task => task.name === name, "completed", completed => !completed)

However when I try to delete a task, I get some very strange behavior

setTasks((tasks) => tasks.filter((task) => task.name !== name))

setTasks((tasks) => tasks.filter((task) => task.name !== name))

My understanding is that here the instructions are to take tasks for the current store, filter them by tasks which are not the name given, diff that against the current store, and then set the store to that new array. IE create a new store with a list of tasks equal to the current list of tasks without the ones which have this name.

I think my understanding is sound. However the results when I <For> over the list and display, is that each time I delete a task, the task is deleted, however a copy of the last task in the array is created in its place. like each element is being checked and if it does not meet the filter, it is removed and the next element is being duplicated. Ultimately giving some very odd todo list behavior.

If I create 5 tasks, and then delete them all, I am left with a list of 5 tasks all duplicates of the last one create. When I try to delete that, I don't get an error, just a filter which is an empty array, but not the creation of a new store that is empty.

I suspect I am doing something obviously wrong, and have no doubt you have been able to see it quickly. I suspect it has something to do with working with the proxies rather then the underlying data? but am at a loss!

SolidJS•3y ago•

10 replies

Sam Kennedy Hine

setStore odd creation behavior

const [tasks, setTasks] = createStore<item[]>([{ name: "Exsist", note: "" }])

const [tasks, setTasks] = createStore<item[]>([{ name: "Exsist", note: "" }])

and can update tasks happily

setTasks(task => task.name === name, "completed", completed => !completed)

setTasks(task => task.name === name, "completed", completed => !completed)

However when I try to delete a task, I get some very strange behavior

setTasks((tasks) => tasks.filter((task) => task.name !== name))

setTasks((tasks) => tasks.filter((task) => task.name !== name))

setStore odd creation behavior

setStore odd creation behavior

Similar Threads

Similar Threads

Similar Threads