Javascript 我希望根据传递到功能组件中的数据动态生成表单。不同的数据有不同的形式

在下面的代码中，我接受一个对象。我拉出要用作表单标签的对象键。我为循环编写了几个不同的，可以创建常量变量数组。我的问题是构建[idProps，idMeta]变量以传递到我的表单中[idProps，idMeta]需要为每个表单输入更改[{label}Props，{label}Meta]useField（）很棘手。欢迎任何建议或参考其他代码

import React, { useCallback } from 'react';
import { useField } from 'fielder';
import Form from 'react-bootstrap/Form';
import { Container, Row, Col } from 'react-bootstrap';
import BrewFormGroup from '../FormComponents/BrewFormGroup';
import BrewButton from '../Buttons/BrewButtons';


function BrewFormComponent(props) {
console.log("row ===> ",props.data);

  // Variables and const 
  const data =props.data;
  console.log(data);
  const keys = Object.keys(data);
  const test = [];

  const createVars = ()=>{
    for (let i = 0; i < keys.length; i++) {
      const element = keys[i];
      test.push(element);

    }
  }
createVars();
  const [idProps, idMeta] = useField({
    name: 'id',
    initialValue: props.data.id,
  });

  //   ========== Functions ============

// const keys = HandleData.getObjectKeysprops2(data);
  const handleSubmit = useCallback((event) => {
    
  }, []);

  const changeLocation = () => {
    alert("Submit to local storage")
    console.log("Hobnob===> "+test[2]);
  }
  
  //   =============== Return ===================

  return (
        <Container><Row className="mb-2 justify-right">
      <Col></Col><Col><BrewButton
        variant="success"
        type="submit"
        onClick={changeLocation}
        value="Submit"></BrewButton></Col>
        </Row>
        <Form autoComplete="off" onSubmit={handleSubmit}>
            <BrewFormGroup
              props={idProps}
              meta={idMeta}
              label="id"
              type="text"
            />
      </Form></Container>)
};

export default BrewFormComponent;

import React，{useCallback}来自“React”；
从“fielder”导入{useField}；
从“react引导/表单”导入表单；
从“react bootstrap”导入{Container，Row，Col}；
从“../FormComponents/BrewFormGroup”导入BrewFormGroup；
从“../Buttons/BrewButtons”导入BrewButton；
功能BrewFormComponent（道具）{
log（“row===>”，props.data）；
//变量和常量
const data=props.data；
控制台日志（数据）；
常量键=对象键（数据）；
常数测试=[]；
常量createVars=（）=>{
for（设i=0；i{
}, []);
常量changeLocation=（）=>{
警报（“提交到本地存储”）
log（“Hobnob==>”+测试[2]）；
}
//===================返回===================
返回(
)
};
导出默认BrewFormComponent；

因此，我认为您可以使用Formik的其他功能来实现您的目标。与使用

useField

动态构建字段不同，您可以在输出本身中映射道具。比如：

return (
      <Form autoComplete="off" onSubmit={handleSubmit}>
        {Object.keys(props.data).map((key) => (
          <Field id={key} name={key} initialValue={props.data[key]} />
        )}
      </Form>

返回(
{Object.keys（props.data）.map（（key）=>(
)}

因此，我认为您可以使用Formik的其他功能来实现您的目标。您不必使用

useField

动态构建字段，而可以在输出本身中映射您的道具。例如：

return (
      <Form autoComplete="off" onSubmit={handleSubmit}>
        {Object.keys(props.data).map((key) => (
          <Field id={key} name={key} initialValue={props.data[key]} />
        )}
      </Form>

返回(
{Object.keys（props.data）.map（（key）=>(
)}

谢谢，我能够将数据传递到与基本相同的组件中，并使用不同的数据大小和键动态构建表单。很高兴提供帮助！如果此答案解决了您的问题，请将其标记为已接受感谢我能够将数据传递到与基本相同的组件中，并动态构建表单使用不同的数据大小和键。很乐意提供帮助！如果此答案解决了您的问题，请将其标记为已接受