Incorrect params rendered

SolidStart

SolidStart, FileRoutes

I thought this would work but it renders the previous routes params sometimes. Likely my misunderstanding.

<Params>

<Params>

is a component that is rendered as a child of several route components.

When the route changes a different different component loads and I expected

const tableData

const tableData

to get populated with the current params.

printParams

printParams

always logs the passed-in/correct params, but <Params> sometimes renders the params from the previous route.

It is easy to fix by converting

tableData

tableData

to a function

const tableData = () => {...}

const tableData = () => {...}

, but I'm would like to understand why the current approach isn't working?

// a route
import { useParams }  from '@solidjs/router'

export default function SomeComponent() {
  const params = useParams
  return <Params params={params} />
}

// a route
import { useParams }  from '@solidjs/router'

export default function SomeComponent() {
  const params = useParams
  return <Params params={params} />
}

// a child of the route
...
import type { Params as ParamsType } from '@solidjs/router'
import { printParams } from '@b2/utils'

export function Params(props: {
  params: ParamsType
}) {

  createEffect(() => {
    printParams(props.params) // Logs params to console as a table
  })

  const tableData = Object.entries(
    props.params
  ).map(([key, value], index) => ({
    index,
    key,
    value,
  }))

  return (
    <div>
      <table class={styles.paramsTable}>
        <thead>
          <tr>
            <th>#</th>
            <th>Key</th>
            <th>Value</th>
          </tr>
        </thead>
        <tbody>
          <For each={tableData}>
            {({ index, key, value }) => (
              <tr>
                <td>{index}</td>
                <td>{key}</td>
                <td>{value}</td>
              </tr>
            )}
          </For>
        </tbody>
      </table>
    </div>
  )
}

// a child of the route
...
import type { Params as ParamsType } from '@solidjs/router'
import { printParams } from '@b2/utils'

export function Params(props: {
  params: ParamsType
}) {

  createEffect(() => {
    printParams(props.params) // Logs params to console as a table
  })

  const tableData = Object.entries(
    props.params
  ).map(([key, value], index) => ({
    index,
    key,
    value,
  }))

  return (
    <div>
      <table class={styles.paramsTable}>
        <thead>
          <tr>
            <th>#</th>
            <th>Key</th>
            <th>Value</th>
          </tr>
        </thead>
        <tbody>
          <For each={tableData}>
            {({ index, key, value }) => (
              <tr>
                <td>{index}</td>
                <td>{key}</td>
                <td>{value}</td>
              </tr>
            )}
          </For>
        </tbody>
      </table>
    </div>
  )
}

SolidJS•3mo ago•

4 replies

Carl (klequis)

Incorrect params rendered

SolidStart

SolidStart, FileRoutes

I thought this would work but it renders the previous routes params sometimes. Likely my misunderstanding.

<Params>

<Params>

is a component that is rendered as a child of several route components.

When the route changes a different different component loads and I expected

const tableData

const tableData

to get populated with the current params.

printParams

printParams

always logs the passed-in/correct params, but <Params> sometimes renders the params from the previous route.

It is easy to fix by converting

tableData

tableData

to a function

const tableData = () => {...}

const tableData = () => {...}

, but I'm would like to understand why the current approach isn't working?

// a route
import { useParams }  from '@solidjs/router'

export default function SomeComponent() {
  const params = useParams
  return <Params params={params} />
}

// a route
import { useParams }  from '@solidjs/router'

export default function SomeComponent() {
  const params = useParams
  return <Params params={params} />
}

// a child of the route
...
import type { Params as ParamsType } from '@solidjs/router'
import { printParams } from '@b2/utils'

export function Params(props: {
  params: ParamsType
}) {

  createEffect(() => {
    printParams(props.params) // Logs params to console as a table
  })

  const tableData = Object.entries(
    props.params
  ).map(([key, value], index) => ({
    index,
    key,
    value,
  }))

  return (
    <div>
      <table class={styles.paramsTable}>
        <thead>
          <tr>
            <th>#</th>
            <th>Key</th>
            <th>Value</th>
          </tr>
        </thead>
        <tbody>
          <For each={tableData}>
            {({ index, key, value }) => (
              <tr>
                <td>{index}</td>
                <td>{key}</td>
                <td>{value}</td>
              </tr>
            )}
          </For>
        </tbody>
      </table>
    </div>
  )
}

// a child of the route
...
import type { Params as ParamsType } from '@solidjs/router'
import { printParams } from '@b2/utils'

export function Params(props: {
  params: ParamsType
}) {

  createEffect(() => {
    printParams(props.params) // Logs params to console as a table
  })

  const tableData = Object.entries(
    props.params
  ).map(([key, value], index) => ({
    index,
    key,
    value,
  }))

  return (
    <div>
      <table class={styles.paramsTable}>
        <thead>
          <tr>
            <th>#</th>
            <th>Key</th>
            <th>Value</th>
          </tr>
        </thead>
        <tbody>
          <For each={tableData}>
            {({ index, key, value }) => (
              <tr>
                <td>{index}</td>
                <td>{key}</td>
                <td>{value}</td>
              </tr>
            )}
          </For>
        </tbody>
      </table>
    </div>
  )
}

Incorrect params rendered

Similar Threads

Incorrect params rendered

Similar Threads

Similar Threads

Similar Threads