Javascript React异步状态管理

我不喜欢上传没有沙盒的代码片段，但我使用firebase的这个特定实例不知道如何制作一个。为冗长的代码道歉。我是一个React开发新手，我已经在状态管理问题上纠缠了两周了，我尝试了很多不同的方法，但都没有结果。请帮忙

我的目标是单击

AddLinkButton

逐个创建多个输入表单，每个输入表单都是不同的链接，通过单击

Apply按钮

它将收集所有链接值并将其存储到firebase的firestore。一旦存储完成，它将通过向

传递多个更新的钩子值来显示预览

如果我运行下面这段特定的代码，则应该是链接输入表单的值的键为null，并且不会在onChange上更新

请帮忙。。。非常感谢。多谢各位

编辑：将变量名key更改为keyHook，但未成功。同一问题

const AdminCustomizer=（）=>{
const[username，setUsername]=useState（null）；
常量[linkForm，setlinkForm]=useState（[]）；
常量[spotlightLabel，setSpotlightLabel]=useState（“”）；
const[spotlightLink，setSpotlightLink]=useState（“”）；
const[refresh，setRefresh]=useState（false）；
const[keyHook，setKeyHook]=useState（null）；
常量[startCollect，setStartCollect]=useState（false）；
const linkRef=useRef（）；
const userInfo={username，linkRef，spotlightLabel，spotlightLink，pfpURL，refresh}；
//在初始加载时，将数据库加载到页面
如果（！用户名）{
firebase.getAuth（）.onAuthStateChanged（用户=>{
如果（用户）{
setUsername（user.displayName）；
firebase.getUserInfo（user.displayName）。然后（结果=>{
设置聚光灯标签（结果：聚光灯标签）；
设置spotlightLink（结果：spotlightLink）；
linkRef.current=result.links；
if（result.links）{
Object.values（result.links）.forEach（link=>{
AddLinks（link）；
});
}
})
}
});
}
//刷新时（单击“应用更改”按钮时），使用更新的数据库重新加载页面值
useffect（（）=>{
如果（刷新）{
firebase.getAuth（）.onAuthStateChanged（用户=>{
如果（用户）{
firebase.getUserInfo（user.displayName）。然后（结果=>{
linkRef.current=result.links；
Object.values（result.links）.forEach（link=>{
AddLinks（link）；
});
})
设置刷新（假）；
}
});
}
}，[刷新]）
//添加AddLink按钮将添加一个新的输入表单
//添加带有firebase数据库值的AddLink将添加带有加载值的新输入表单
const AddLinks=url=>{
consthooks={refresh，startCollect，keyHook，setKeyHook}；
if（url）setKeyHook（url）；
setlinkForm（[…linkForm，]）；
}
//添加链接输入表单
const AddLink=props=>{
const handleChange=e=>setKeyHook（e.target.value）；
返回(


)
}
//单击应用更改时，从所有链接输入表单收集输入值
如果（开始收集）{
linkForm.forEach（表单=>{
linkRef.current={
…linkRef.current，
链接：form.keyHook，
}
});
addLinksToUser（{spotlightLabel，spotlightLink，linkRef}）。然后（（）=>{
//强制刷新以更新UserPreview的userInfo
setStartCollect（假）；
设置刷新（true）；
});
}
返回(
setStartCollect（true）}>应用更改
setSpotlightLabel（e.target.value）}value={spotlightLabel}/>
setSpotlightLink（e.target.value）}value={spotlightLink}/>
AddLinks（空）}/>
{linkForm？linkForm.map（child=>child）：null}
);
}
导出默认管理员自定义程序；

在

AddLink

中，

键是一个受限制的关键字，不会作为道具传播。请尝试其他道具名称，而不是
键

看

尝试：


您好，谢谢您的建议！我尝试进行更改，但keyHook仍然给我空值…您需要更改道具键的名称->keyHook:Hi，我确实想将其作为键，因为它给了我一个错误，即所有子级都需要一个键。但是keyHook也是hooks的一部分，所以AddLink仍然会有keyHook。是的，把它们都加上。哦，我明白了，对不起，我误会了。我添加了两者，有趣的是，它现在给我的是未定义的，而不是null
<AddLink key={keyHook} keyHook={keyHook} hooks={hooks} />