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

Question

我正在使用 react(next.js) 来构建一个简单的应用程序。 在这种特殊情况下，我试图在添加和编辑模式下创建一个表单。 如果 get 参数包含编辑，则表单会进行一些 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 调用上，但我不确定如何解决。 请任何帮助。 提前致谢

Answer 1

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

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

}, [contact_id, form_mode])

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

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

问题描述

1 个解决方案

解决方案1
1 2021-10-14 02:29:23

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

问题描述

1 个解决方案

解决方案1 1 2021-10-14 02:29:23

解决方案1
1 2021-10-14 02:29:23