Javascript 如何将react路由器查询参数与mobx全局状态绑定？

我正在使用CreateReact应用程序、MobxReact-lite和react-router dom创建一个web客户端。如何将路由查询参数连接到mobx状态

我正在使用钩子，所以我尝试将useffect（）钩子与mobx autorun（）函数结合使用，并将我的组件道具包装在useAsObservableSource（）钩子中（正如这里建议的那样），只要我使用简单的参数，它就可以正常工作，但如果它是一个数组，效果就会进入无限循环

const Index = props => {
  const store = useStore(); // my mobx global state store
  const source = useAsObservableSource(props);

  useEffect(() => autorun(() => {
    // extracting url query params
    const params = new URLSearchParams(source.location.search);
    const tags = params.getAll('tags'); // an array ['4', '6', etc.]
    const orderBy = params.get('orderBy') || 'date'; // a string
    store.orderBy = orderBy; // works fine
    store.tags = tags; // works only first time, when open in new browser window, if query string changes, causes infinite rerenders

    store.fetchSomeData();
  }),
  []);

  return (
    <Observer>{() => (
      <div>
        // render components based on store
      </div>
    )}</Observer>
  );
};

const Index=props=>{
const store=useStore（）；//我的mobx全局状态存储
常量源=使用可观测源（道具）；
useEffect（（）=>自动运行（（）=>{
//提取url查询参数
const params=新的URLSearchParams（source.location.search）；
const tags=params.getAll（'tags'）；//数组['4'，'6'，等]
const orderBy=params.get（'orderBy'）| |'date'；//字符串
store.orderBy=orderBy；//工作正常
store.tags=tags；//仅第一次工作，在新浏览器窗口中打开时，如果查询字符串发生更改，则会导致无限重渲染
store.fetchSomeData（）；
}),
[]);
返回(
{() => (
//基于存储的渲染组件
)}
);
};

每次查询字符串更改时，预期效果只运行一次，但每次查询字符串更改时，效果将运行无限次