如何处理POST混合类型数据：仅传表单值并对指定字段parseInt

向API提交POST数据时碰到以下问题：

• 请求返回报错：POST https://api.factarni.tn/article/create 420
• API返回错误信息：

{
  "message": "Invalid data",
  "code": 400,
  "date": "2022-09-11T14:04:53.903Z",
  "level": "error"
}

• 查看请求Payload发现，请求同时发送了useState的初始值和表单输入值，而且字段名大小写混乱（比如同时存在code和Code）：

{
  "code": "",
  "article": "",
  "price": 0,
  "vat": 0,
  "status": 0,
  "company_id": 0,
  "Code": "code1",
  "Article": "article1",
  "Price": "10",
  "Vat": "20",
  "Status": "30",
  "Company_id": "40"
}

需求：只发送表单输入的有效数据，并且把price、vat、status、company_id字段转换成整数类型。

const New = ({ inputs, title }) => {
  // 保持初始状态字段名和API要求一致（统一小写格式）
  const [data, setData] = useState({
    code: "",
    article: "",
    price: 0,
    vat: 0,
    status: 0,
    company_id: 0,
  });

  function handle(e) {
    const { id, value } = e.target;
    // 将输入框的ID转换成和state匹配的字段名（小写+下划线替换空格）
    const fieldName = id.toLowerCase().replace(' ', '_');
    // 对指定字段执行整数转换，非目标字段直接存原始值
    const processedValue = ['price', 'vat', 'status', 'company_id'].includes(fieldName) 
      ? parseInt(value, 10) || 0 
      : value;

    // 用函数式更新state，避免异步更新导致的旧值覆盖
    setData(prev => ({ ...prev, [fieldName]: processedValue }));
  }

  const handleClick = async (e) => {
    e.preventDefault();

    await fetch("https://api.factarni.tn/article/create", {
      method: "POST",
      body: JSON.stringify(data),
      headers: {
        "Content-Type": "application/json",
        Authorization: "Bearer eyJhbGciOiJSUzI...qw2QWltkyA",
      },
    });
  };

  return (
    <div className="New">
      {/* ...其他页面代码 */}
      <form>
        {/* ...其他表单元素 */}
        {inputs.map((input) => {
          // 提前转换字段名，避免重复计算
          const fieldName = input.label.toLowerCase().replace(' ', '_');
          return (
            <div className="formInput" key={input.id}>
              <label>{input.label} </label>
              <input
                type={input.type}
                placeholder={input.placeholder}
                onChange={handle}
                id={input.label}
                // 绑定对应的state值，确保表单显示和state同步
                value={data[fieldName] || ''}
                name={fieldName}
              />
            </div>
          )
        })}
        <button onClick={handleClick}>Add</button>
      </form>
      {/* ...其他页面代码 */}
    </div>
  );
};

• 统一字段名：把输入框的id转换成和state、API一致的小写格式，彻底解决大小写混乱导致的重复字段问题。
• 实时类型转换：在输入变更时就对目标字段执行parseInt转换，确保state里存的是整数，提交时直接用即可。
• 修复值绑定错误：原代码里value={data.form}是无效的，改成绑定对应字段的state值，保证表单输入和state同步。
• 优化state更新：用函数式更新setData(prev => ...)，避免因为state异步更新导致的旧值覆盖问题。

内容的提问来源于stack exchange，提问作者Darkpsinight