javascript - 如何将获取参数数据传递给反应中的组件?
问题描述
我正在使用 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 调用上,但我不知道如何解决它。请提供任何帮助。提前致谢
解决方案
- 您的
useEffect()
函数仅在组件加载时运行。 - 您必须在
useEffect
每次contact_id
或form_mode
更改中调用所有代码,因此我建议您将这些作为可观察参数传递给 useEffect,如下所示
useEffect(()=>{
// All your runnable code
}, [contact_id, form_mode])
现在你里面的所有代码每次都会运行,
contact_id
甚至form_mode
会稍微改变另外,我建议您将所有
await
s 包装在 try-catch 块中,以便测试 API 的工作情况
推荐阅读
- laravel - 更好的解决方案而不是 $wire.set 为 livewire 传递计算的 Alpine 值
- java - ant matcher 如何在 Spring Security 中工作
- node.js - Spotify API 的 CORS 重定向问题?
- c++ - 如何正确编写向量的特征?
- c# - 需要根据批量大小准备查询
- python - 如何从包含文件路径的变量中删除文件扩展名
- go - 如何忽略模块中的 .go 文件?
- layout - android Layout 内容位置变化
- c++ - 如何多次继承同一个类?
- elasticsearch - 具有过滤和聚合的 Elasricsearch 查询