Javascript 如何通过数组映射来生成基于api响应的动态表单？

我正在使用React.js。我想基于一些api响应创建一个动态表单。以下是创建表单的条件

1.表单字段必须基于entityTable数组中table1和table2键的值生成。有时，table1和table2键可能包含多个值。在这种情况下，我需要基于逗号（，）分割值，并将它们视为单独的值。

现在，我需要将从table1和table2键接收的值与ReceivedData对象的键进行比较。若有匹配项，那个么我需要用对应键的值的initialValue生成表单字段

必须根据entityTable数组中table1\u edit和table2\u edit的键值禁用表单字段。如果值为0，则必须禁用表单字段

请访问代码的链接

到目前为止我做了什么

class Todo extends Component {

  render() {

    // Here is the API response

    const data = {
      recievedData: {
        pan_number: "3213265",
        gender: "M",
        last_name: "45645",
        pan_status: "VALID",
        middle_name: "null",
        rece_pan_num: "435353",
        first_name: "464",
        sent_pan_num: "546546",
        pan_name: "some name",
        pan_holder_title: "null"
      },
      questions: [],
      entityTable: [
        {
          id: 1,
          table1: "pan_number",
          table2: "sent_pan_num,rece_pan_num,pan_status",
          table1_edit: "1",
          table2_edit: "0"
        },
        {
          id: 2,
          table1: "pan_name,first_name",
          table2: "middle_name,last_name",
          table1_edit: "1",
          table2_edit: "0"
        },
        {
          id: 3,
          table1: "gender",
          table2: "pan_holder_title",
          table1_edit: "1",
          table2_edit: "0"
        }
      ]
    };

    const mainArray = [];

    const givenData =
      data.entityTable &&
      data.entityTable.map(item => {
        if (item.table1.includes(",")) {
          let newArray = item.table1.split(",");
          let itemProp = item.table1_edit;
          mainArray.push({ table_one: newArray, itemProp: itemProp });
        } else {
          if (item.table1 === "" || item.table1 === null) {
            return null;
          } else {
            let newArray = item.table1;
            let itemProp = item.table1_edit;
            mainArray.push({ table_one: newArray, itemProp: itemProp });
          }
        }

        if (item.table2.includes(",")) {
          let newArray = item.table2.split(",");
          let itemProp = item.table2_edit;
          mainArray.push({ table_two: newArray, itemProp: itemProp });
        } else {
          if (item.table2 === "" || item.table2 === null) {
            return null;
          } else {
            let newArray = item.table2;
            let itemProp = item.table2_edit;
            mainArray.push({ table_two: newArray, itemProp: itemProp });
          }
        }
        return mainArray;
      });
    return (
      <div>
        <form>
          {Object.keys(data.recievedData).map((selec, index) => {


            // Here how do I need to compare the values from givenData to check the match?

            return <input placeholder={data.recievedData[selec]} />;
          })}
        </form>
      </div>
    );
  }
}

类Todo扩展组件{
render（）{
//下面是API响应
常数数据={
收到数据：{
pan_编号：“3213265”，
性别：“M”，
姓氏：“45645”，
pan_状态：“有效”，
中间名称：“空”，
接收盘编号：“435353”，
名字：“464”，
发送盘号：“546546”，
PANU名称：“某个名称”，
pan持有人标题：“空”
},
问题：[]，
实体表：[
{
id:1，
表1：“pan_编号”，
表2：“发送盘号、接收盘号、盘号状态”，
表1_编辑：“1”，
表2_编辑：“0”
},
{
id:2，
表1：“盘名、名”，
表2：“中名、姓”，
表1_编辑：“1”，
表2_编辑：“0”
},
{
id:3，
表1：“性别”，
表2：“pan_持有人_头衔”，
表1_编辑：“1”，
表2_编辑：“0”
}
]
};
常量mainArray=[]；
吉文达康斯特酒店=
data.entityTable&&
data.entityTable.map（项=>{
if（表1项包括（“，”））{
让newArray=item.table1.split（“，”）；
让itemProp=item.table1\u编辑；
push（{table_one:newArray，itemProp:itemProp}）；
}否则{
if（item.table1===“”| | item.table1===null）{
返回null；
}否则{
设newArray=item.table1；
让itemProp=item.table1\u编辑；
push（{table_one:newArray，itemProp:itemProp}）；
}
}
如果（表2项包括（“，”））{
让newArray=item.table2.split（“，”）；
让itemProp=item.table2_编辑；
push（{table_two:newArray，itemProp:itemProp}）；
}否则{
if（item.table2===“”| | item.table2===null）{
返回null；
}否则{
设newArray=item.table2；
让itemProp=item.table2_编辑；
push（{table_two:newArray，itemProp:itemProp}）；
}
}
返回主数组；
});
返回(
{Object.keys（data.receiveddata）.map（（selec，index）=>{
//在这里，我需要如何比较givenData中的值来检查匹配？
返回；
})}
);
}
}

---

首先，我映射entityTable数组，并将所需的值推送到数组中。现在我陷入了需要与ReceivedData对象进行的比较中。如何通过givenData数组循环检查匹配

我没有使用您需要的确切数据结构，因为我不想真正了解您需要做的所有事情，我只是想向您展示如何根据一个元素是否与另一个数组中的某个元素匹配来有条件地渲染该元素：

class Todo extends Component {

    constructor(props) {
        super(props);

        this.state = {
            recievedData: [{
                id: 2,
                editable: false,
                value: 'x'
            }, {
                id: 3,
                editable: true,
                value: 'm'
            }],
            givenData: [{
                id: 3,
                value: 'r'
            }]
        };

        this.renderItem = this.renderItem.bind(this);
    }

    renderItem(data, index) {
        const name = `item_${index}`;
        const matchingData = this.state.givenData.find(item => item.id === data.id);

        const readOnly = !data.editable;

        if (matchingData) {
            return <input name={name} type="text" readOnly={readOnly} defaultValue={matchingData.value}/>
        } else {
            return <input name={name} type="text" readOnly={readOnly} defaultValue={data.value}/>
        }
    }

    render() {

        return (
            <div>
                <form>
                    {Object.keys(this.state.recievedData).map((selec, index) => {
                        // Here how do I need to compare the values from givenData to check the match?
                        return this.renderItem(selec, index);
                    })}
                </form>
            </div>
        );
    }
}

类Todo扩展组件{
建造师（道具）{
超级（道具）；
此.state={
收到数据：[{
id:2，
可编辑：false，
值：“x”
}, {
id:3，
是的，
值：“m”
}],
纪梵达：[{
id:3，
值：“r”
}]
};
this.renderItem=this.renderItem.bind（this）；
}
renderItem（数据、索引）{
const name=`item_${index}`；
const matchingData=this.state.givenData.find（item=>item.id==data.id）；
常量只读=！data.editable；
如果（匹配数据）{
返回
}否则{
返回
}
}
render（）{
返回(
{Object.keys（this.state.receiveddata）.map（（selec，index）=>{
//在这里，我需要如何比较givenData中的值来检查匹配？
返回此.renderItem（selec，索引）；
})}
);
}
}

---

如您所见，您可以使用类中的函数返回组件。在

.map

函数中使用此函数。您可能希望

输入

有一个键a井，可能基于id

您正在执行

渲染

函数中的所有逻辑，这对我来说并不理想。如果您有数据要开始，无论它是基于道具还是其他什么，您都应该在构造函数中或在

componentDidMount

函数中执行。其次，如果您希望有条件地呈现内容，您应该在有条件地返回组件的类上使用函数。我将发布一个示例答案