我正在表中显示从 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)
}
我提交我只获得结果的最后一个值,无法获得结果的所有对象,是由于地图函数还是什么? 我该如何解决?
表单中的所有输入都必须具有唯一的
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"
}