React/MUI调用API后useState变量重置为默认值问题排查

开发了名为Job的React组件，用于渲染多个输入字段，其中一个字段通过endAdorment配置搜索图标，点击可调用后端API填充其余字段。使用基于useState的自定义useForm Hook管理表单状态：

• 手动输入时状态可正常保留；
• 点击搜索图标后，API返回值能短暂显示在表单中，但values状态会被重置为初始空值，无法保留该状态。

相关代码如下：

Job组件代码 #

const custDetails = {
  vehicle: "",
  mobile: "",
  email: "",
  name: "",
  address: "",
  alt_mobile: "",
};

export default function Job() {
  const customerURL = "http://localhost:3001/api/v1/findCustomer";
  const { values, setvalues, handleChange } = useForm(custDetails);

  const fetchCustomer = async (vehicle) => {
    return await axios
      .post(customerURL, {
        input_type: "vehicle",
        search_key: vehicle,
      })
      .then((res) => res.data);
  };

  const findCustomer = (e) => {
    e.preventDefault();
    fetchCustomer(values.vehicle).then((data) => {
      setvalues(data);
    });
  };

  // 组件返回部分略
}

自定义useForm Hook代码 #

import { useState } from 'react'

export function useForm(initialValues) {
    const [values, setvalues] = useState(initialValues);
    const handleChange = e => {
        const { name, value } = e.target
        setvalues({
            ...values,
            [name]: value
        })
    }
  return {
    values,
    setvalues,
    handleChange,
  }
}

核心问题出在状态更新的方式和潜在的数据结构匹配问题：

1. 直接调用setvalues(data)会完全替换当前的values对象，如果API返回的data缺少部分字段（或与custDetails字段不匹配），未返回的字段会被覆盖为undefined，后续操作易触发状态重置；
2. 未使用函数式更新，存在闭包陷阱风险，可能导致获取的values不是最新状态；
3. 未对API请求做错误处理，若请求失败会导致状态更新逻辑中断，且无法快速排查问题。

1. 使用函数式更新合并状态 #

将直接替换对象改为合并现有状态与API返回数据，确保保留未被API覆盖的字段，同时避免闭包问题：

const findCustomer = (e) => {
  e.preventDefault();
  fetchCustomer(values.vehicle).then((data) => {
    // 用函数式更新，合并现有状态和API返回数据
    setvalues(prevValues => ({ ...prevValues, ...data }));
  }).catch(err => {
    // 添加错误处理，排查请求问题
    console.error('获取客户信息失败:', err);
  });
};

2. 验证API返回的数据结构 #

确认后端API返回的data字段名与custDetails完全一致（比如vehicle、mobile等字段必须一一对应），若字段名不匹配，需在前端转换后再更新状态：

// 示例：如果API返回的是mobile_number，需要转换为mobile
fetchCustomer(values.vehicle).then((apiData) => {
  const data = {
    ...apiData,
    mobile: apiData.mobile_number,
    alt_mobile: apiData.alt_mobile_number
  };
  setvalues(prevValues => ({ ...prevValues, ...data }));
})

3. 优化自定义useForm Hook的状态更新 #

为useForm添加函数式更新支持，避免闭包问题，同时可新增合并状态的方法：

export function useForm(initialValues) {
    const [values, setvalues] = useState(initialValues);
    const handleChange = e => {
        const { name, value } = e.target
        // 使用函数式更新，确保获取最新的状态
        setvalues(prev => ({
            ...prev,
            [name]: value
        }));
    };
    // 新增mergeValues方法，统一处理合并更新
    const mergeValues = (newData) => {
        setvalues(prev => ({ ...prev, ...newData }));
    };
  return {
    values,
    setvalues,
    mergeValues,
    handleChange,
  }
}

之后在Job组件中可直接调用mergeValues(data)来合并状态。

4. 排查组件重挂载问题 #

如果上述修改后仍出现状态重置，检查父组件是否导致Job组件频繁卸载/重新挂载（比如父组件的key变化、条件渲染触发），这会导致组件状态回到初始值。

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