Derived value in event handler causing router error | SolidJS | Page 1

paper cave Apr 14, 2023, 7:12 PM

#

Error: Make sure your app is wrapped in a <Router /> when calling an eventhandler. Just trying to log a derived signal/prop in my buy function. The values from product() get printed correctly in my DOM

  const product = () => props.product
  const [qty, setQty] = createSignal(0)

  function buy() {
    console.log(product())
    // console.log(qty())
  }

The second console.log works fine. But the first throws

Uncaught Error: Make sure your app is wrapped in a <Router />
    at invariant (utils.js?v=8381e9f0:28:15)
    at useRouter (routing.js?v=8381e9f0:9:32)
    at useRoute (routing.js?v=8381e9f0:11:75)
    at useParams (routing.js?v=8381e9f0:37:32)
    at product (ProductDetail.tsx:11:22)

paper cave Apr 14, 2023, 7:41 PM

#

Ok so wrapping it in createMemo fixed it. const product = createMemo(() => props.product). Is this the correct way to do this?

quick swan Apr 14, 2023, 8:22 PM

#

i don't understand the reason for the error so I can't help with that but why do you need a derived signal for that? why not just use props?

paper cave Apr 15, 2023, 9:07 AM

#

quick swan i don't understand the reason for the error so I can't help with that but why do...

dont wanna do props.product everywhere, sort of alternate to props destructuring

quick swan Apr 16, 2023, 1:42 AM

#

doing props.* everywhere is how Solid intends props to be used. If you prefer destructuring, you could always check out the solid primitive for that https://primitives.solidjs.community/package/destructure#spread-component-props

Solid Primitives

A library of high-quality primitives that extend SolidJS reactivity

#

@paper cave

paper cave Apr 16, 2023, 4:01 AM

#

quick swan doing props.* everywhere is how Solid intends props to be used. If you prefer de...

I'll check it out. Thanks

#Derived value in event handler causing router error