React表单问题：未修改字段返回初始状态而非API默认值

问题核心是状态初始化逻辑和组件受控性不匹配：你用defaultValue仅设置了输入框的初始显示值，但状态（noResi/kurir/ongkir）的初始值是0，用户未修改字段时，状态不会自动同步defaultValue的内容，提交时自然会带上初始的0。

解决方法是把表单改成受控组件，让状态与输入框值完全同步，且初始化状态时直接复用API返回的transaction数据：

1. 用API数据初始化表单状态

   // 基于React Hooks示例，获取到transaction数据后初始化状态
   const [formData, setFormData] = useState({
     resi: transaction.resi,
     courier: transaction.courier,
     ongkir: transaction.ongkir
   });
   

2. 将defaultValue替换为value绑定状态，通过onChange同步更新

   <input 
     value={formData.resi} 
     onChange={(e) => setFormData(prev => ({ ...prev, resi: e.target.value }))} 
   />
   <select 
     value={formData.courier} 
     onChange={(e) => setFormData(prev => ({ ...prev, courier: e.target.value }))} 
   />
   <input 
     value={formData.ongkir} 
     onChange={(e) => setFormData(prev => ({ ...prev, ongkir: e.target.value }))} 
   />
   

3. 提交时直接使用formData对象
   此时不管用户修改了哪些字段，formData里未修改的字段都会保留API返回的初始值，不会出现0的异常情况。

如果是类组件，逻辑类似：在获取到API数据后，将transaction赋值给组件状态，表单元素绑定this.state对应字段，onChange时更新状态即可。

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