Html 根据不断变化的状态变量，在react中显示多个动态输入字段？

因此，我正在构建我的第一个React应用程序，它连接到Flask后端。我有一个从Python程序中获取字典的特定功能组件，我将其保存在一个状态变量中（使用useState、setVariables完成）。 对象的类型为

{'A':'x', 'B':'y', 'C':2},

这些都是可变的，每个渲染都需要是动态的，只基于这个对象。 基于此对象的当前状态，我希望在中显示此对象的键值对

insertkey

此外，我希望能够保存对这些值所做的任何更改，并将其写入状态变量，以便将它们发送回Flask后端

我试着通过每个循环，插入如下内容：

const[fields，setFields]=useState（{}）；
//获取和设置状态的中间代码
useffect（（）=>{
for（对象项（字段）的常量[键，值]）{
log（`${key}:${value}`）；
insert=insert+`${key}
`
}
document.getElementById（'fields_form'）。innerHTML=insert；
});
常量更改数据=（evt）=>{
设置字段（{[evt.target.name]：evt.target.value}）；
日志（evt.target.value）；
}
//一些中间代码
返回(


);

但当我这样做时，状态被设置为“未定义”

我很想听到一些方法来实现这一点。也许这是一个非常小的修正，我错过了它，或者可能有一种不同的方法更合适。

简单：

const Form=（）=>{
const[values，setValues]=useState（{}）；
const onChange=（e）=>{
const name=e.target.name；
设值=e.target.value；
setValues（{…values，[名称]：value}）；
};
const onSubmit=（e）=>{
//发送数据或将其保存到本地存储
api.send（值）
};
返回(
>
拯救
);
};
导出默认表单；
console.log（值）；

这是你的解决方案

const[fields，setFields]=useState（{}）；
const[values，setValues]=useState（{}）；
//一些获取逻辑
//在加载某些数据时发生
//例如，数据结构如下所示：
//获取数据={
//电邮:'email@placeholder'
//主题：“主题占位符”
//正文：“正文占位符”
// }
useffect（（）=>{
如果（获取数据）{
设置字段（获取数据）
}
}，[fetchedData]）；
//在字段更改时发生
useffect（（）=>{
如果（字段）{
设置值（字段）
}
}，[字段]；
常量更改数据=（evt）=>{
setValues（{…value[evt.target.name]：evt.target.value}）；
}
返回(
{Object.keys（fields）.map（=>(
))}
);

简单：

const Form=（）=>{
const[values，setValues]=useState（{}）；
const onChange=（e）=>{
const name=e.target.name；
设值=e.target.value；
setValues（{…values，[名称]：value}）；
};
const onSubmit=（e）=>{
//发送数据或将其保存到本地存储
api.send（值）
};
返回(
>
拯救
);
};
导出默认表单；
console.log（值）；

这是你的解决方案

const[fields，setFields]=useState（{}）；
const[values，setValues]=useState（{}）；
//一些获取逻辑
//在加载某些数据时发生
//例如，数据结构如下所示：
//获取数据={
//电邮:'email@placeholder'
//主题：“主题占位符”
//正文：“正文占位符”
// }
useffect（（）=>{
如果（获取数据）{
设置字段（获取数据）
}
}，[fetchedData]）；
//在字段更改时发生
useffect（（）=>{
如果（字段）{
设置值（字段）
}
}，[字段]；
常量更改数据=（evt）=>{
setValues（{…value[evt.target.name]：evt.target.value}）；
}
返回(
{Object.keys（fields）.map（=>(
))}
);

实际上，onChange函数根本无法传递事件。因此它给出了未定义的“Event.target”。确切的错误是--TypeError:undefined不是对象（计算'evt.target.name'）。onChange中的函数调用是否有问题？我将更新我的答案。将

onChange

处理程序设置为输入组件。否，因此我有一个动态创建的表单，即可能有不同数量的输入文本字段（其值存储为单独的状态变量）。这就是为什么我要遍历每一对，并尝试将其添加到所需的组件中（请参见useEffect）。执行此操作时，onChange无法将事件变量传递给changedData函数（显示未定义的目标）。像这样的动态设置表单是否有一个onChange处理程序？请参阅我答案中的更新。您不需要直接更新HTMLDOM树。在react中，您需要使用jsx构建它。正如您在render方法中所看到的那样，我们从fields对象构建输入字段，因此.map（）工作得非常出色！非常感谢您的多次回复、代码编辑和非常有用的建议！：）不过做了一个小小的改变，这可能会对其他可能正在阅读本文的人有所帮助。由于本例中的“fields”是一个对象，而.map（）函数只对数组有效，因此它会抛出一个错误。因此，在对象字段--

Object.keys（fields.map）的键上运行.map（）@Pavel再次表示感谢，多年来一直坚持这一点，非常感激：）事实上，onChange函数根本无法传递事件。因此它给出了未定义的“Event.target”。确切的错误是--TypeError:undefined不是对象（计算'evt.target.name'）。onChange中的函数调用是否有问题？我将更新我的答案。将
onChange
处理程序设置为输入组件。否，因此我有一个动态创建的表单，即可能有不同数量的输入文本字段（其值存储为单独的状态变量）。这就是为什么我要遍历每一对，并试图将其添加到所需的com中