React中如何将API返回数据作为useState表单初始值并避免报错

组件首次渲染时，useEffect内的接口请求是异步执行的，此时data的初始值为空对象{}，data[0]为undefined，直接访问data[0].AUD就会抛出类型错误。

• 调整state初始值，避免初始化时读取未返回的接口数据
  data实际接收的是数组类型返回值，初始值改为空数组；memberfee的AUD字段先给兜底默认值，不要直接读取data[0].AUD
• 接口请求拿到数据后，再更新memberfee的对应字段，覆盖初始默认值
• 可选：新增加载状态，接口返回前禁止表单操作/展示加载提示，避免用户在初始值未加载完成时操作

// 调整data初始值为数组，符合接口返回的结构
const [data, setData] = useState([]);
const [show, setShow] = useState(false);
// memberfee初始值给AUD设置兜底默认值，不直接读取未返回的接口数据
const [memberfee,setMemberFee]=useState({
  AUD:"", // 可根据需求替换为你需要的默认数值
  CAD:"92.8",
  CHF:"69.14",
  EUR:"63.03",
  GBP:"54.22",
  KWD:"22.49",
  TRY:"648.18",
  USD:"74.65",
  XNA:"100000",
  NewMembershipInvest:"20",
  MembershipYearlyInvest:"1"
})
// 可选：新增加载状态
const [loading, setLoading] = useState(true);

let name,value;
const handleInputs=e=>{
  name=e.target.name;
  value=e.target.value;
  setMemberFee({...memberfee,[name]:value})
}

const submitForm=()=> {
  const {AUD ,CAD ,CHF ,EUR ,GBP ,KWD ,TRY ,USD ,XNA ,NewMembershipInvest ,MembershipYearlyInvest }=memberfee;
  const doc = {
      AUD ,CAD ,CHF ,EUR ,GBP ,KWD ,TRY ,USD ,XNA ,NewMembershipInvest ,MembershipYearlyInvest 
  };

  axios.put('/memfeeput', doc)
  .then( res => {
    alert('Updated successfully!');
   }   
  )
  .catch(err => {
    console.log(err.response);
    alert('An error occurred! Try submitting the form again.');
  });
}

useEffect(() => {
  async function fetchBooks() {
    try {
      const response = await fetch('/memfeeget');
      const json = await response.json();
      const resData = json.mf2;
      setData(resData);
      // 接口拿到数据后更新memberfee的对应字段
      if (resData?.[0]?.AUD) {
        setMemberFee(prev => ({...prev, AUD: resData[0].AUD}))
      }
    } catch (err) {
      console.error('接口请求失败', err)
    } finally {
      // 关闭加载状态
      setLoading(false);
    }
  }
  fetchBooks();
},[]);

如果表单里其他字段也需要用接口返回值覆盖默认值，只需要在接口返回的判断逻辑里，把对应的字段都放到setMemberFee的更新逻辑里即可。加载状态可以绑定到表单的输入框、提交按钮的disabled属性上，体验更友好。

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