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

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

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

}, [contact_id, form_mode])

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

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

How to pass get parameter data to a component in react?

javascript

reactjs

next.js

react-props

use-state