如何将获取参数数据传递给反应中的组件？答案

【问题标题】：How to pass get parameter data to a component in react?如何将获取参数数据传递给反应中的组件？
【发布时间】：2021-12-02 10:34:37
【问题描述】：

我正在使用 react(next.js) 构建一个简单的应用程序。在这种特殊情况下，我试图在添加和编辑模式下创建一个表单。如果 get 参数包含 edit，则表单会进行一些 api 调用，否则会进行一些不同的 api 调用。我将 get 参数作为道具传递，但这似乎不起作用。

这是我的页面代码：

  const [formMode, setFormMode] = useState(h.form.FORM_MODE.ADD);
  const [selectedContactId, setSelectedContactId] = useState("");

  useEffect(() => {
    const contact_id = h.findGetParameter("contact_id");
    setSelectedContactId(contact_id);
    const form_mode = h.findGetParameter("form_mode");
    setFormMode(form_mode);
    console.log(form_mode);
    console.log(contact_id);
  }, []);

  return (
    <div >
      <Header />
      <Body>
        <div className="container projects-container">
          <div className="mb-5 projects-title">
            <h1> Create Link</h1>
          </div>
          <CreateMyForm
            setLoading={setLoading}
            formMode={formMode}
            setFormMode={setFormMode}
            selectedContactId={selectedContactId}
          />
        </div>
      </Body>
      <Footer />
    </div>

我从 URL 中获取参数 contact_id 和 form_mode，将它们设置为 useState（工作正常并在控制台中打印），然后将它们作为道具传递给 CreateMyForm 组件。组件中似乎没有收到它。以下是我需要这些参数的组件中的部分代码。

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

  useEffect(() => {
    // const contact_id = h.findGetParameter("contact_id");
    // console.log("contact id = ", contact_id);
    // setSelectedContactId(contact_id);
    // const form_mode = h.findGetParameter("form_mode");
    // setFormMode(form_mode);
    // // console.log(contact_id);
    // console.log("latest = ", form_mode);
    // console.log("latest = ", selectedContactId);

    (async () => {
      if (h.cmpStr(formMode, h.form.FORM_MODE.EDIT)) {
        const selectedContactRes = await api.contact.findById(
          { contact_id: selectedContactId },
          {},
          false
        );
        console.log("Her's me agains: ", selectedContactRes.data);
        setSelectedContact(selectedContactRes.data.contact);
      }

      let projectApiRes = await api.project.contentFindAll({}, {}, false);
      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({}, {}, false);
        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);
          }
        }
      }
    })();

  }, []);

我什至尝试过捕获组件中的 get 参数，但这似乎也不起作用。我猜问题出在异步 API 调用上，但我不确定如何解决它。请提供任何帮助。提前致谢

【问题讨论】：

标签： javascript reactjs next.js react-props use-state

【解决方案1】：

您的useEffect() 函数仅在组件加载时运行。
每次contact_id 或form_mode 更改时，您都必须调用useEffect 中的所有代码，因此我建议您将这些作为可观察参数传递给useEffect，如下所示

useEffect(()=>{
   // All your runnable code

}, [contact_id, form_mode])

现在你所有的代码在每次contact_id 或form_mode 稍微改变时都会运行
另外，我建议您将所有 awaits 包装在一个 try-catch 块中，以便测试 API 的工作情况

【讨论】：

有其他方法吗？当我将 useEffect 更改为每次 contact_id 和 form_mode 更改时运行时，它会影响我更改 formMode 的其余代码
它自然会到处改变formMode，因为你必须在你的应用程序的所有地方都应用了redux Provider。对此进行排序的 2 种方法： 1. 在您选择的组件中使用 useState 单独处理 form_mode 状态，因此它只会影响您要通过此更改更新的组件中的 form_mode 值 2. 使用 useMemo() 挂钩确保contact_id中的更改不会导致redux批量更新和更新form_mode另外，只是一个提示只需在某些handleSubmit函数上调用formMode和contact_id的setter函数而不是on每一次改变