React(Next.js)如何将GET参数传递给组件并解决参数接收失效问题

你遇到的问题核心是useEffect依赖项配置错误导致的：

• 父组件首次渲染时，formMode和selectedContactId还是初始值（新增模式、空字符串），此时子组件已经完成挂载，执行了依赖为空数组的useEffect，使用的是初始props值
• 后续父组件的useEffect执行完，更新了两个state并传递给子组件，但子组件的useEffect因为依赖为空，不会重新执行，所以看起来没有接收到更新后的props
• 你之前尝试在子组件内直接获取GET参数不生效也是同样的逻辑，子组件首次执行useEffect时可能还没拿到最新的URL参数，或者参数更新后不会重新触发逻辑

1. 补全子组件useEffect的依赖项 #

将formMode和selectedContactId加入useEffect的依赖数组，确保props更新后逻辑会重新执行。

2. 增加参数有效性判断 #

避免参数还未加载完成时发起无效请求，编辑模式下需要判断selectedContactId是否存在。

3. 可选：添加请求取消逻辑 #

避免组件卸载后请求继续执行抛出警告，可使用AbortController终止未完成的请求。

const { setLoading, formMode, setFormMode, selectedContactId } = props;

useEffect(() => {
  const abortController = new AbortController();
  const signal = abortController.signal;

  (async () => {
    // 编辑模式下先判断contactId是否存在，避免无效请求
    if (h.cmpStr(formMode, h.form.FORM_MODE.EDIT) && selectedContactId) {
      const selectedContactRes = await api.contact.findById(
        { contact_id: selectedContactId },
        { signal },
        false
      );
      if (signal.aborted) return;
      console.log("Her's me agains: ", selectedContactRes.data);
      setSelectedContact(selectedContactRes.data.contact);
    }

    let projectApiRes = await api.project.contentFindAll({}, { signal }, false);
    if (signal.aborted) return;
    if (h.cmpStr(projectApiRes.status, "ok")) {
      if (
        projectApiRes.data.projects &&
        projectApiRes.data.projects.length > 0
      ) {
        let projects = handleProjectOptionList(projectApiRes.data.projects);
        setProjects(projectApiRes.data.projects);
        setProjectList(projects);
      }
    }

    if (h.cmpStr(formMode, h.form.FORM_MODE.ADD)) {
      let contactApiRes = await api.contact.findAll({}, { signal }, false);
      if (signal.aborted) return;
      if (h.cmpStr(contactApiRes.status, "ok")) {
        if (
          contactApiRes.data.contacts &&
          contactApiRes.data.contacts.length > 0
        ) {
          let contacts = handleContactOptionList(contactApiRes.data.contacts);
          console.log("I am coming here");
          setContactList(contacts);
        }
      }
    }
  })();

  // 组件卸载/依赖更新时取消未完成的请求
  return () => abortController.abort();
// 补全依赖项
}, [formMode, selectedContactId]);

如果使用Next.js的pages路由，可直接在页面组件的getServerSideProps中拿到查询参数，直接作为props传入页面，无需在客户端useEffect中获取参数，可避免首次渲染参数为空的问题：

// 页面组件示例
export async function getServerSideProps(context) {
  const { contact_id, form_mode } = context.query;
  return {
    props: {
      initialFormMode: form_mode || h.form.FORM_MODE.ADD,
      initialContactId: contact_id || ""
    }
  }
}

// 页面组件内直接用props初始化state
const Page = ({initialFormMode, initialContactId}) => {
  const [formMode, setFormMode] = useState(initialFormMode);
  const [selectedContactId, setSelectedContactId] = useState(initialContactId);
  // 不需要再用useEffect获取参数
  // ...其余逻辑保持不变
}

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