Axios.post的catch中更新两个状态致页面空白，如何解决？

问题核心原因是错误处理中未对error.response或error.response.data的存在性做校验：当请求出错（比如网络故障、后端未返回预期结构）时，直接访问嵌套属性会抛出TypeError，导致组件渲染崩溃，页面变成空白。单独更新一个状态时，可能刚好对应属性存在，或者组件对单个undefined状态兼容性更好，但同时更新两个时，只要其中一个属性不存在就会触发报错。

解决方案： #

1. 添加存在性校验+默认值

在更新状态前，先确认error.response.data存在，同时给状态设置默认值，避免传入undefined导致渲染问题：

const response = await axios
  .post("http://localhost:4000/api/auth/login", loginUser)
  .catch((error) => {
    const errorData = error.response?.data;
    if (errorData) {
      setEmptyFields(errorData.emptyFields || []);
      setError(errorData.message || '登录失败');
    } else {
      // 处理无response的情况（比如网络错误）
      setError('网络异常，请稍后重试');
      setEmptyFields([]);
    }
  });

2. 使用可选链+空值合并简化代码

利用ES6的可选链操作符?.和空值合并运算符??，安全访问嵌套属性并设置默认值：

const response = await axios
  .post("http://localhost:4000/api/auth/login", loginUser)
  .catch((error) => {
    setEmptyFields(error.response?.data?.emptyFields ?? []);
    setError(error.response?.data?.message ?? '登录失败，请检查网络或输入');
  });

3. 优化：合并状态更新（可选）

如果两个状态关联性强，可以合并成一个状态对象，用一次状态更新完成，减少重渲染次数：

// 先定义合并后的状态
const [loginError, setLoginError] = useState({
  message: '',
  emptyFields: []
});

// 请求中的错误处理
const response = await axios
  .post("http://localhost:4000/api/auth/login", loginUser)
  .catch((error) => {
    setLoginError({
      message: error.response?.data?.message ?? '登录失败',
      emptyFields: error.response?.data?.emptyFields ?? []
    });
  });

关键提醒 #

• 永远不要假设error.response一定存在：网络错误、跨域问题、服务器崩溃等场景下，error.response会是undefined，直接访问其属性会报错。
• 给状态设置合理的默认值：比如emptyFields默认设为空数组，避免渲染时因为undefined引发数组相关的渲染错误（比如map遍历undefined）。

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