未使用主键中的数据填充的易碎表单

import React, { useState } from 'react';

const MyForm = () => {
  const [formData, setFormData] = useState({
    id: '', // 主键字段
    name: '',
    email: ''
  });

  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!formData.id) {
      alert('主键不能为空');
      return;
    }
    // 提交表单数据
    try {
      const response = await fetch('/api/submit', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(formData)
      });
      if (!response.ok) {
        throw new Error('提交失败');
      }
      alert('提交成功');
    } catch (error) {
      console.error(error);
      alert('提交失败，请重试');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="id" value={formData.id} onChange={handleChange} placeholder="主键" required />
      <input type="text" name="name" value={formData.name} onChange={handleChange} placeholder="姓名" required />
      <input type="email" name="email" value={formData.email} onChange={handleChange} placeholder="邮箱" required />
      <button type="submit">提交</button>
    </form>
  );
};

export default MyForm;

from flask import Flask, request, jsonify

app = Flask(__name__)

@app.route('/api/submit', methods=['POST'])
def submit():
    data = request.get_json()
    if not data.get('id'):
        return jsonify({'error': '主键不能为空'}), 400
    # 处理表单数据
    try:
        # 数据库操作
        return jsonify({'message': '提交成功'}), 200
    except Exception as e:
        return jsonify({'error': str(e)}), 500

if __name__ == '__main__':
    app.run(debug=True)