S
SolidJS2y ago
Nin

createResource State gets updated without directly doing so

I have a createResource function which retrieves data from a database, in the same function, I'm extracting a set of data and calling setState for an already existing object called selectedTasks.
const [clients] = createResource(async () => {
const { data: clients, error } = await supabaseClient(dblogic)

const taskList = {}
Object.entries(clients?.tasks).forEach(([subject, obj]) => {
if (obj.tasks) {
taskList[subject] = obj.tasks
} else {
taskList[subject] = [subject]
}
})

setState('selectedTasks', taskList)
return { ...clients, taskList }
})
const [clients] = createResource(async () => {
const { data: clients, error } = await supabaseClient(dblogic)

const taskList = {}
Object.entries(clients?.tasks).forEach(([subject, obj]) => {
if (obj.tasks) {
taskList[subject] = obj.tasks
} else {
taskList[subject] = [subject]
}
})

setState('selectedTasks', taskList)
return { ...clients, taskList }
})
Later on in my page I'm updating the state of the selectedTasks with a checkbox, however this appears to also be updating my createResource resource. Very confused! This is my handleCheckboxChange
const handleCheckboxChange = (group) => (event) => {
if (event.target.checked) {
setState('selectedTasks', {
...state.selectedTasks,
[group]: [...state.selectedTasks[group], event.target.value],
})
} else {
setState('selectedTasks', {
...state.selectedTasks,
[group]: state.selectedTasks[group].filter(
(task) => task !== event.target.value,
),
})
}
}
const handleCheckboxChange = (group) => (event) => {
if (event.target.checked) {
setState('selectedTasks', {
...state.selectedTasks,
[group]: [...state.selectedTasks[group], event.target.value],
})
} else {
setState('selectedTasks', {
...state.selectedTasks,
[group]: state.selectedTasks[group].filter(
(task) => task !== event.target.value,
),
})
}
}
1 Reply
Nin
Nin2y ago
Then this is the checkbox component itself
<For each={clients()?.taskList[care_task]}>
{(task) => (
<Checkbox
size="lg"
value={task}
checked={state.selectedTasks[
care_task
].includes(task)}
onChange={handleCheckboxChange(care_task)}
>
{getLabelMapping(care_task).tasks[task]}
</Checkbox>
)}
</For>
<For each={clients()?.taskList[care_task]}>
{(task) => (
<Checkbox
size="lg"
value={task}
checked={state.selectedTasks[
care_task
].includes(task)}
onChange={handleCheckboxChange(care_task)}
>
{getLabelMapping(care_task).tasks[task]}
</Checkbox>
)}
</For>