提交时我只得到最后一个对象数组而不是完整数据

问题描述 投票:0回答:1

我正在表中显示从 API 获取的数据,该表将输入作为字段来编辑数据。

它有通过API获取的多个数据记录,发布记录的更改我想更新用户所做的更改并将其传递给API进行更新。

    {Result.map((item,index) => (
                    <tr key={index} className="table-Result-Data">
                      <td>
                        <input
                          type="text"
                          name="applicationId"
                          value={item.acd_ap_id}
                          readOnly
                        />
                      </td>
                      <td>
                        <input
                          type="text"
                          name="applicationName"
                          value={item.acd_ap_nm}
                          readOnly
                        />
                      </td>
                      <td>
                        <input
                          type="text"
                          name="gsid"
                          value={item.acd_ap_gsid}
                          readOnly
                        />
                      </td>
                      <td>
                        <input
                          type="text"
                          name="Sequence"
                          value={item.acd_con_seq}
                          readOnly
                        />
                      </td>
                      <td>
                        <input
                          type="text"
                          name="applicationDl"
                          onChange={(e) => {
                            item.acd_appl_dl = e.target.value;
                          }}
                          defaultValue={item.acd_appl_dl}
                        />
                      </td>
                      <td>
                        <input
                          type="email"
                          name="leadManagerDl"
                          defaultValue={item.acd_lead_manager_dl}
                          onChange={(e) => {
                            item.acd_lead_manager_dl = e.target.value;
                          }}
                        />
                      </td>
                      <td>
                        <input
                          type="email"
                          name="systemOwnerNameDl"
                          defaultValue={item.acd_system_owner_name_dl}
                          onChange={(e) => {
                            item.acd_system_owner_name_dl = e.target.value;
                          }}
                        />
                      </td>
                      <td>
                        <input
                          type="text"
                          name="dataCenterName"
                          defaultValue={item.acd_dc_name}
                          onChange={(e) => {
                            item.acd_dc_name = e.target.value;
                          }}
                        />
                      </td>
                      <td>
                        <input
                          type="text"
                          name="qaSftpId"
                          defaultValue={item.acd_qa_sftp_id}
                          onChange={(e) => {
                            item.acd_qa_sftp_id = e.target.value;
                          }}
                        />
                      </td>
                      <td>
                        <input
                          type="text"
                          name="qaSftpPwd"
                          defaultValue={item.acd_qa_sftp_pwd}
                          onChange={(e) => {
                            item.acd_qa_sftp_pwd = e.target.value;
                          }}
                        />
                      </td>
                      <td>
                        <input
                          type="text"
                          name="prodSftpId"
                          defaultValue={item.acd_prod_sftp_id}
                          onChange={(e) => {
                            item.acd_prod_sftp_id = e.target.value;
                          }}
                        />
                      </td>
                      <td>
                        <input
                          type="text"
                          name="prodSftpPwd"
                          defaultValue={item.acd_prod_sftp_pwd}
                          onChange={(e) => {
                            item.acd_prod_sftp_pwd = e.target.value;
                          }}
                        />
                      </td>
                      <td>
                        <input
                          type="text"
                          name="updatedUser"
                          defaultValue={item.acd_upd_usr}
                          onChange={(e) => {
                            item.acd_upd_usr = e.target.value;
                          }}
                        />
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            <input type="submit" className="submit_Update" />

结果有四个数据,我使用 formdata 访问它

export async function action({ request }) {
  console.log(" APDB functioncalled");
  const formData = await request.formData();
  console.log(formData)
  const data = Object.fromEntries(formData);
  console.log(data)
}

我提交我只获得结果的最后一个值,无法获得结果的所有对象,是由于地图函数还是什么? 我该如何解决?

javascript reactjs react-hooks react-router react-forms
1个回答
0
投票

表单中的所有输入都必须具有唯一的

name
属性。您当前的实现对每个映射的输入集使用相同的
name
属性,因此只有最后一个映射的输入才是设置表单数据值的输入。

附加数组索引是消除所有输入歧义的一种方法。

示例:

{result.map((item, index) => (
  <tr key={index} className="table-Result-Data">
    <td>
      <input
        type="text"
        name={"applicationId-" + index}
        value={item.acd_ap_id}
        readOnly
      />
    </td>
    <td>
      <input
        type="text"
        name={"applicationName-" + index}
        value={item.acd_ap_nm}
        readOnly
      />
    </td>
    <td>
      <input
        type="text"
        name={"gsid-" + index}
        value={item.acd_ap_gsid}
        readOnly
      />
    </td>
    <td>
      <input
        type="text"
        name={"Sequence-" + index}
        value={item.acd_con_seq}
        readOnly
      />
    </td>
    <td>
      <input
        type="text"
        name={"applicationDl-" + index}
        onChange={(e) => {
          item.acd_appl_dl = e.target.value;
        }}
        defaultValue={item.acd_appl_dl}
      />
    </td>
    <td>
      <input
        type="email"
        name={"leadManagerDl-" + index}
        defaultValue={item.acd_lead_manager_dl}
        onChange={(e) => {
          item.acd_lead_manager_dl = e.target.value;
        }}
      />
    </td>
    <td>
      <input
        type="email"
        name={"systemOwnerNameDl-" + index}
        defaultValue={item.acd_system_owner_name_dl}
        onChange={(e) => {
          item.acd_system_owner_name_dl = e.target.value;
        }}
      />
    </td>
    <td>
      <input
        type="text"
        name={"dataCenterName-" + index}
        defaultValue={item.acd_dc_name}
        onChange={(e) => {
          item.acd_dc_name = e.target.value;
        }}
      />
    </td>
    <td>
      <input
        type="text"
        name={"qaSftpId-" + index}
        defaultValue={item.acd_qa_sftp_id}
        onChange={(e) => {
          item.acd_qa_sftp_id = e.target.value;
        }}
      />
    </td>
    <td>
      <input
        type="text"
        name={"qaSftpPwd-" + index}
        defaultValue={item.acd_qa_sftp_pwd}
        onChange={(e) => {
          item.acd_qa_sftp_pwd = e.target.value;
        }}
      />
    </td>
    <td>
      <input
        type="text"
        name={"prodSftpId-" + index}
        defaultValue={item.acd_prod_sftp_id}
        onChange={(e) => {
          item.acd_prod_sftp_id = e.target.value;
        }}
      />
    </td>
    <td>
      <input
        type="text"
        name={"prodSftpPwd-" + index}
        defaultValue={item.acd_prod_sftp_pwd}
        onChange={(e) => {
          item.acd_prod_sftp_pwd = e.target.value;
        }}
      />
    </td>
    <td>
      <input
        type="text"
        name={"updatedUser-" + index}
        defaultValue={item.acd_upd_usr}
        onChange={(e) => {
          item.acd_upd_usr = e.target.value;
        }}
      />
    </td>
  </tr>
))}

提交表单时,操作应该能够访问所有字段,并且可能类似于以下内容:

console.log(data);
{
    "applicationId-0": "sdkflksdls",
    "applicationName-0": "lskdlsdlsflkj",
    "gsid-0": "sdlkjdsflj",
    "Sequence-0": "dld[-04m",
    "applicationDl-0": "09fiblwen",
    "leadManagerDl-0": "sdp9@upmweg",
    "systemOwnerNameDl-0": "pse@knlen",
    "dataCenterName-0": "slkjeg;`",
    "qaSftpId-0": "p0jwew.",
    "qaSftpPwd-0": "l;jesf;l;",
    "prodSftpId-0": "ndvo;iwen",
    "prodSftpPwd-0": "odsilewn",
    "updatedUser-0": "lisfklf",
    "applicationId-1": "laflknnk",
    "applicationName-1": "lkesdp90efn",
    "gsid-1": "9035lkn0",
    "Sequence-1": "90welkeflkj",
    "applicationDl-1": "-0eoermg;e",
    "leadManagerDl-1": "poele@smflw",
    "systemOwnerNameDl-1": "lkewl@gkeln",
    "dataCenterName-1": "lksdmrh[oklme",
    "qaSftpId-1": "098senfk",
    "qaSftpPwd-1": "sdkjfnwle",
    "prodSftpId-1": "-9ergm.dr",
    "prodSftpPwd-1": "09o34j64;lkn",
    "updatedUser-1": "lkwe;l;ml;v"
}
© www.soinside.com 2019 - 2024. All rights reserved.