React报错Objects are not valid as a React child (found: [object Promise])问题咨询

• React函数组件禁止声明为async类型。async函数默认返回Promise实例，而React要求组件必须返回可渲染的JSX结构，框架解析到返回的Promise时就会抛出你遇到的Objects are not valid as a React child (found: [object Promise])报错。
• 你直接在组件顶层执行await start()，会导致组件每次渲染都会自动发起登录请求，既不符合用户提交表单才触发登录的交互逻辑，也会造成大量无效请求浪费资源。
• 普通变量t不会触发组件更新，如果你需要把接口返回的信息渲染到页面上，需要用useState存储响应数据。

import { useState } from 'react';

export const LoginScreen = () => { // 移除组件的async声明
  const [formValues, handleInputChange] = useForm({
    email: '',
    password: ''
  });
  // 用state存储接口返回的登录数据，需要渲染时可以直接调用
  const [loginResult, setLoginResult] = useState(null);

  const start = async function () {
    try {
      const resp = await fetch('http://localhost:3003/login', {
        method: 'POST',
        body: JSON.stringify({
          'email': formValues.email,
          'password': formValues.password
        }),
        headers: {
          'Content-Type': 'application/json'
        }
      });
      const data = await resp.json();
      return data;
    } catch (err) {
      console.error('登录请求异常', err);
      return { code: -1, msg: '请求失败' }
    }
  }

  // 提交回调添加async声明，请求逻辑移到此处触发
  const handleSubmit = async (e) => {
    e.preventDefault();
    const t = await start();
    console.log(t);
    setLoginResult(t);
    // 此处可追加登录成功跳转、错误提示等逻辑
  }

  // 组件必须返回合法JSX结构，以下为最简表单示例，可根据需求调整样式和结构
  return (
    <form onSubmit={handleSubmit}>
      <input name="email" value={formValues.email} onChange={handleInputChange} placeholder="请输入邮箱" />
      <input name="password" type="password" value={formValues.password} onChange={handleInputChange} placeholder="请输入密码" />
      <button type="submit">登录</button>
      {loginResult && <div>登录返回信息：{JSON.stringify(loginResult)}</div>}
    </form>
  )
}

• 如果你使用的useForm是第三方库的Hook，确认导入路径正确即可正常使用，不需要额外修改。
• 生产环境建议给请求加统一的异常捕获、loading状态处理，避免接口报错导致页面崩溃。

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