React中如何使用useState处理并获取API返回的错误信息？

问题1：首次提交时console.log(errors)返回undefined #

React的setState是异步操作，调用setErrors后状态不会立即更新。你在setErrors之后立刻打印errors，拿到的还是更新前的旧状态（初始值null），所以首次提交时会显示undefined或null。

解决办法：

• 不要在setErrors后直接打印状态，改用useEffect监听errors的变化，状态更新后再打印：

useEffect(() => {
  if (errors) {
    console.log(errors);
  }
}, [errors]);

• 或者直接在组件函数顶部打印errors，每次组件重新渲染时都会输出最新状态。

问题2：React运行时错误“Objects are not valid as a React child” #

这个错误说明你尝试渲染的errors是一个对象，而非字符串。虽然你提到API返回的是"Invalid username/password."，但实际可能存在两种情况：

1. 后端返回的error.response.data结构不是{message: "xxx"}，比如直接返回空对象；
2. 某些异常场景下，error.response.data.message不存在，导致setErrors存入了undefined或空对象。

解决办法：

• 先打印error.response.data确认实际返回结构，再针对性处理：

catch (error) {
  if (error.response.status === 401) {
    console.log('API返回数据:', error.response.data); // 先确认结构
    // 确保拿到的是字符串类型的消息
    const errorMessage = error.response.data?.message || 'Invalid username/password.';
    setErrors(errorMessage);
  } else {
    console.log("There was a problem or the request was cancelled.")
  }
}

• 如果后端直接返回字符串（而非带message字段的对象），则直接使用error.response.data；
• JSX渲染时增加类型判断，避免渲染非字符串内容：

<div>{typeof errors === 'string' ? errors : ''}</div>

完整修改示例 #

import { useState, useEffect } from 'react';

function LoginForm() {
  const [errors, setErrors] = useState(null);

  // 监听错误状态变化
  useEffect(() => {
    if (errors) {
      console.log('当前错误消息:', errors);
    }
  }, [errors]);

  const handleSubmit = async (e) => {
    e.preventDefault();
    // 获取用户名密码逻辑...
    try {
      // 调用API逻辑...
    } catch (error) {
      if (error.response?.status === 401) {
        // 兼容不同的API返回结构
        const errorMessage = typeof error.response.data === 'string' 
          ? error.response.data 
          : error.response.data?.message || 'Invalid username/password.';
        setErrors(errorMessage);
      } else {
        setErrors("There was a problem or the request was cancelled.");
      }
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* 表单元素 */}
      {errors && typeof errors === 'string' && <div className="error">{errors}</div>}
    </form>
  );
}

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