SolidJS•15mo ago

For loop in route breaks when form in another component is submitted

I have this <For> loop in a route. Works fine.... UNTIL..... There is another component I can use from the route that displays some search results. As soon as I submit the form in the search component I get this error message: note is undefined I'm stuggling to understand why an element of the array I'm looping through suddenly becomes undefined when I submit a form in another component. The array I'm looping through always appears to have five items in it. I'm console.logging notes() with a createEffect and it always has five items.

            <tbody>
              <For each={notes()} fallback={<></>}>
                {(note) => {
                  const lastEditedDate = new Date(note.lastEdited)
                  return (
                    <tr class='odd:bg-subMenuColor'>
                      <td class='px-8 py-4 border-b border-ternaryColor text-left'>
                        {note.bookTitle} ({note.translatorName})
                      </td>
                      <td class='px-8 py-4 border-b border-ternaryColor text-left'>
                        {note.chapterName}
                      </td>
                      <td class='px-8 py-4 border-b border-ternaryColor text-left'>
                        {note.paragraphNumber}
                      </td>
                      <td class='px-8 py-4 border-b border-ternaryColor text-left'>
                        {note.notes}
                      </td>
                      <td class='px-8 py-4 border-b border-ternaryColor text-left'>
                        {lastEditedDate.toDateString()}
                      </td>
                    </tr>
                  )
                }}
              </For>
            </tbody>

            <tbody>
              <For each={notes()} fallback={<></>}>
                {(note) => {
                  const lastEditedDate = new Date(note.lastEdited)
                  return (
                    <tr class='odd:bg-subMenuColor'>
                      <td class='px-8 py-4 border-b border-ternaryColor text-left'>
                        {note.bookTitle} ({note.translatorName})
                      </td>
                      <td class='px-8 py-4 border-b border-ternaryColor text-left'>
                        {note.chapterName}
                      </td>
                      <td class='px-8 py-4 border-b border-ternaryColor text-left'>
                        {note.paragraphNumber}
                      </td>
                      <td class='px-8 py-4 border-b border-ternaryColor text-left'>
                        {note.notes}
                      </td>
                      <td class='px-8 py-4 border-b border-ternaryColor text-left'>
                        {lastEditedDate.toDateString()}
                      </td>
                    </tr>
                  )
                }}
              </For>
            </tbody>

8 Replies

GrahfOP•15mo ago

Also, as soon as I click "clear errors and retry" it's fine again

GrahfOP•15mo ago

notes() is changing from this to this

GrahfOP•15mo ago

I guess this is wrong:

const notes = createServerData$((value) => getAllNotesForReader(value), {
    key() {
      return reader()?.id
    },
  })

const notes = createServerData$((value) => getAllNotesForReader(value), {
    key() {
      return reader()?.id
    },
  })

And this is right:

  const notes = createServerData$(
    ([id]) => getAllNotesForReader(id),
    { key: () => [reader()?.id] }, // read the reactive value in the key function
  )

  const notes = createServerData$(
    ([id]) => getAllNotesForReader(id),
    { key: () => [reader()?.id] }, // read the reactive value in the key function
  )

Not sure what the difference is but the second one works all the time

mdynnl•15mo ago

how is reader signal setup?

vibeman1987•15mo ago

by the way, use ` for better code readability

console.log('like this')

console.log('like this')

GrahfOP•15mo ago

const reader = createServerData$((_, { request }) => getReader(request))

const reader = createServerData$((_, { request }) => getReader(request))

It seems like I need to add "js" after the first set of backticks when I do that or I don't get syntax highlighting

vibeman1987•15mo ago

yup

mdynnl•15mo ago

+ a
- b

+ a
- b

Gaming

Programming

For loop in route breaks when form in another component is submitted