Multiple setQueryParam calls do not work

pbeshai / use-query-params

React Hook for managing state in URL query parameters with easy serialization.

https://pbeshai.github.io/use-query-params

ISC License

2.13k stars 95 forks source link

Multiple setQueryParam calls do not work #233

Closed ruudandriessen closed 1 year ago

ruudandriessen commented 1 year ago

Similar to useState hook - I expect every set call to take into account the existing search params.

Repro case: https://codesandbox.io/s/patient-fire-fqnjt2?file=/src/App.js:0-787

Expected:

After clicking the button, I expect the search params to be foo=a&bar=b.

Actual behaviour:

After clicking the button, search params are set to bar=b. The setFoo('a') call not applied.

squashimodo commented 1 year ago

I'm having the same problem. While it fixes the issue if { options: { enableBatching: true}} is added to the QueryParamProvider, i would still like it to work like pre v2 without that prop, so that it updates the state as many times as the setter is called and appends the query parameter after each setter invokation.

pbeshai commented 1 year ago

This should be fixed in v2.0.1. Let me know if you have any further issues

JulienDemarque commented 1 year ago

This should be fixed in v2.0.1. Let me know if you have any further issues

I am using "use-query-params": "^2.1.1", and "next-query-params": "^4.0.0", and it seems this is still happening. { enableBatching: true} solves it though.

guoyunhe commented 1 year ago

I am still having this issue with 2.1.2. (React Router 6)

pbeshai commented 1 year ago

It seems at some point the navigator returned by React Router stopped including location (maybe in 6.6? I haven't investigated). That breaks this line in the adapter. I suggest either turning on batching in the useQueryParams options (enableBatching: true) or you could try changing that line in the adapter to just use window.location as the return value, but I haven't tested that as a fix.