ReactJS未修改输入框默认值提交为null的解决方法咨询

问题根因 #

你当前混用了非受控组件（使用defaultValue属性）和受控组件的状态逻辑：接口返回的初始数据仅赋值给了输入框的默认显示值，没有同步到提交用的member状态中，未触发过修改的字段就一直保留初始化时的空字符串，最终提交时出现空值。

具体修改方案 #

1. 调整状态初始化逻辑 #

将data的初始值改为空数组，避免后续判断length时报错：

const [data, setData] = useState([]);
const [member,setMember]=useState({ 
  RefPerLVL1:"",RefPerLVL2:"",RefPerLVL3:"",RefPerLVL4:"",RefPerLVL5:"",RefPerLVL6:"",
  RefPerLVL7:"",RefPerLVL8:"",RefPerLVL9:"",RefPerLVL10:"",RefPerLVL11:"",RefPerLVL12:""
})

2. 接口请求成功后同步初始化member #

在useEffect中拿到接口返回数据时，同时给member赋值初始值：

useEffect(() => {
  async function fetchBooks() {
    const response = await fetch('/refpayget');
    const json = await response.json();
    const resData = json.rf2;
    setData(resData);
    // 用接口返回值初始化member
    if(resData?.length) {
      setMember(prev => ({...prev, ...resData[0]}))
    }
  }
  fetchBooks();
},[]);

3. 将输入框改为完全受控组件 #

把所有Form.Control的defaultValue属性替换为value，和member状态绑定，保证输入框显示和状态完全一致：

<Form.Control 
  size="sm" 
  type="text" 
  name="RefPerLVL1" 
  placeholder="Enter Amount" 
  autoFocus 
  value={member.RefPerLVL1}
  onChange={handleInputs}
/>
// 其余11个输入框统一按上面的逻辑修改

4. 简化提交逻辑 #

提交时直接传整个member对象即可，无需逐个解构字段：

const postData=async ()=>{
  const res=await fetch("/refpaypost",{
    method:"POST",
    headers:{
      "Content-Type":"application/json"
    },
    body:JSON.stringify(member)
  });
  const resData=await res.json();
}

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