如何使用 formData 对文本字段行进行分组

Question

我目前在创建可以使用表单数据进行分组的表单时遇到问题。

我有这个表格：

 <form action={formAction} className="flex flex-col w-full justify-around">
        <div className="relative">
          
         <Options
            data={activeUsers.users}
            name="user"
            id="user"
            display1="firstName"
            display2="lastName"
            label="Employee"
            htmlFor="user"
            hideLabel={false}
          />

          <table className="mt-5">
            <thead>
              <tr>
                <th>Success Indicator</th>
                <th>MOV</th>
                <th>Aspect Of Work</th>
              </tr>
            </thead>

            <tbody>
              {inputRows.map((item: any, i: number) => (
                <tr key={i}>

                  <td>
                    <input
                      type="text"
                      id="mov"
                      name={`test[${i}]`}
                      placeholder="MOV"
                      className="rounded-lg py-1 px-1 m-2 text-black"
                      required
                    />
                  </td>

                  <td>
                    <input
                      type="text"
                      id="aspects_of_work"
                      name={`test[${i}]`}
                      placeholder="Aspect of work"
                      className="rounded-lg py-1 px-1 m-2 text-black"
                      required
                    />
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
          <SubmitBtn />
        </div>
        <p role="status">{state?.message}</p>
      </form>

我期待这样的表单数据：

{
 user: 1,
 test: [
 {
  mov: value here,
  aspects_of_work: value here
 },
 {
  mov: value here,
  aspects_of_work: value here
 }
 ]
}

im assuming that the property name is coming from the id property

相反，我得到了这个：

    { name: 'user', value: '1' },
    { name: 'test[0]', value: '5' },
    { name: 'test[0]', value: 'qwe' },
    { name: 'test[0]', value: 'ewq' },
    { name: 'test[1]', value: '27' },
    { name: 'test[1]', value: 'rrr' },
    { name: 'test[1]', value: 'rrr' }

我想知道是否必须使用 formdata API 手动执行此操作，还是应该自动执行此操作。我知道 Rails erb 会这样做，但我不确定是否应该采用相同的方式。

我正在 NEXTJS 上使用这个。

Answer 1

正如我一直在寻找的那样。没有真正的方法可以在 FormData 中对相同的命名属性进行分组，因为它将根据文档转换为字符串https://developer.mozilla.org/en-US/docs/Web/API/FormData/append。

我要做的是自行操作 formData，但我必须设置字段的名称。

name 属性的值为 STTRING-INDEX 以供稍后使用。

{inputRows.map((item: any, i: number) => (
                <tr key={i}>
                  <td>
                    <Options
                      data={sI.successIndicators}
                      name={`successIndicator-${i}`} <--- string - index
                      id="successIndicator"
                      htmlFor="successIndicator"
                      display1="major_final_output"
                      display2="title"
                      label="Success Indicator"
                      hideLabel={true}
                    />
                  </td>

                  <td>
                    <input
                      type="text"
                      name={`mov-${i}`} <--- string - index
                      id="mov"
                      placeholder="MOV"
                      className="rounded-lg py-1 px-1 m-2 text-black"
                      required
                    />
                  </td>

                  <td>
                    <input
                      type="text"
                      name={`aspects_of_work-${i}`} <--- string - index
                      id="aspects_of_work"
                      placeholder="Aspect of work"
                      className="rounded-lg py-1 px-1 m-2 text-black"
                      required
                    />
                  </td>
                </tr>
              ))}

创建所需输出的逻辑：

export async function submitNewAspect(prevState: any, formData: FormData) {
  const newFormData = new Map();
  const aspectData: Array<Map<string, string>> = [];
  newFormData.set('aspects', aspectData);
  newFormData.set('user', formData.get('user'))

  for (const [key, value] of formData) {

    if (key === 'user' || key.startsWith('$')) continue; // skip user and nextjs prop

    const [name, index] = key.split('-');

    if (aspectData[Number(index)]) {
       aspectData[Number(index)].set(name, `${value}`)
      } else {
       aspectData[Number(index)] = new Map([[name, `${value}`]]);
      }
    }

  console.log(Object.fromEntries(newFormData))

}

数据之前：

FormData {
  [Symbol(state)]: [
    { name: 'user', value: '2' },
    { name: 'successIndicator-0', value: '5' },
    { name: 'mov-0', value: 'eqw' },
    { name: 'aspects_of_work-0', value: 'qwe' },
    { name: 'successIndicator-1', value: '25' },
    { name: 'mov-1', value: 'qwe' },
    { name: 'aspects_of_work-1', value: 'qwe' }
  ]
}

数据后：

{
  aspects: [
    Map(3) {
      'successIndicator' => '5',
      'mov' => 'eqw',
      'aspects_of_work' => 'qwe'
    },
    Map(3) {
      'successIndicator' => '25',
      'mov' => 'qwe',
      'aspects_of_work' => 'qwe'
    }
  ],
  user: '2'
}

这样做的缺点是在每个方面我都必须循环将每个方面转换为

Object.fromEntries