时间戳

首页 > 解决方案 > 如何通过数组映射生成基于api响应的动态表单？

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

问题描述

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

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

  1. 现在，我需要将从 table1 和 table2 键接收到的值与 recievedData 对象的键进行比较。如果匹配，那么我需要生成具有相应键值的初始值的表单字段。

  2. 必须根据 entityTable 数组中 table1_edit 和 table2_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>
    );
  }
}

首先，我映射 entityTable 数组并将所需的值推送到数组。现在我陷入了需要使用 recievedData 对象进行的比较中。我如何必须遍历 givenData 数组来检查匹配？

标签： javascriptjsonreactjs

解决方案

我没有使用您需要的确切数据结构，因为我真的不想弄清楚您需要做的所有事情，我只是想向您展示如何根据它是否匹配某个元素来有条件地呈现一个元素另一个数组：

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>
        );
    }
}

如您所见，您可以使用类中的函数来返回组件。在你的函数中使用这个.map函数。您可能希望inputs拥有一口井，可能基于 id

推荐阅读