使用match.params时如何阻止组件无限重渲染或重载

循环渲染的核心是逻辑放置位置和执行边界的双重错位：

• 在JSX return块中直接写业务逻辑属于常见误用：这部分代码和组件的渲染流程强绑定，没有独立的执行时机控制，只要组件因为任何原因（自身state更新、context值变化、父组件传参更新）重渲染，就会重新执行一遍这段代码
• 原本写在渲染块里的逻辑会触发状态更新，形成闭环循环：
  1. 组件首次渲染 → 检测到URL携带filterIdFromURL参数 → 发起savedFilter接口请求
  2. 请求成功 → 执行setSearchFilters更新状态、执行refetch触发数据拉取
  3. 状态变化触发组件重渲染 → 再次走到渲染块的分支判断 → 重复发起请求、更新状态，进入无限循环
• 附带闭包引用bug：请求回调里引用的searchFilters是触发请求当时的旧值，并非setSearchFilters之后的最新数据，会导致refetch传参不符合预期。

1. 将渲染流程中的副作用逻辑挪到专属钩子 #

React 组件的渲染函数必须保持纯函数特性，不能在渲染流程里直接执行会修改自身状态的异步操作。所有这类“渲染完成后需要触发”的逻辑，都要放到useEffect钩子中，通过依赖数组精准控制执行时机。

2. 给副作用设置明确的触发边界 #

• 仅当URL中的filterIdFromURL发生变化时，才重新拉取对应的savedFilter，不要被其他无关的状态更新触发
• 增加已加载标记：同一个filterIdFromURL只触发一次拉取，避免参数不变时重复执行请求
• 修复闭包值问题：拿到接口返回的savedFilter后，直接把最新值传给refetch，不要引用外层闭包里的旧searchFilters

3. 避开依赖项陷阱 #

不要把会频繁变化的状态（比如searchFilters本身）放到useEffect的依赖数组中，否则状态更新会反过来触发副作用执行，再次形成循环。

import { useEffect, useRef } from 'react';

const TheBoardContainer = ({
  addSubscription,
  removeSubscription,
  status,
  id,
  tenantId,
  filterIdFromURL,
  client,
  refetch,
  setSearchFilters
}) => {
  // 用ref记录已加载完成的filterId，值变化时不触发重渲染
  const loadedFilterIdRef = useRef(null);

  useEffect(() => {
    // 无URL参数直接跳过逻辑
    if (!filterIdFromURL) return;
    // 同一个filterId已经加载完成，直接跳过打断循环
    if (loadedFilterIdRef.current === filterIdFromURL) return;

    client.query({
      query: GET_SAVED_FILTER,
      variables: { id: filterIdFromURL },
      fetchPolicy: "network-only",
    }).then(resp => {
      const savedFilter = resp.data?.getSavedFilter;
      if (!savedFilter) return;
      
      // 标记当前filterId已完成加载
      loadedFilterIdRef.current = filterIdFromURL;
      // 更新搜索状态
      setSearchFilters(savedFilter);
      // 直接用接口返回的最新值触发refetch，避免闭包旧值导致的传参错误
      refetch({
        search: savedFilter
      });
    });
  // 仅当URL参数、引用稳定的方法变化时，才重新执行逻辑
  }, [filterIdFromURL, client, refetch, setSearchFilters]);

  // 其余原有渲染逻辑保持不变
}

补充说明：如果context提供的addSubscription、removeSubscription等方法引用不稳定，确实会触发组件重渲染，但只要副作用的触发边界卡死，就不会进入循环。

内容的提问来源于stack exchange，提问作者Sunil Yerra