SolidJS•2y ago

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

NinOP•2y 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>

Gaming

Programming

createResource State gets updated without directly doing so