React表单提交后显示状态提示出现对象无法作为React子元素报错如何解决

报错的核心原因是代码中出现了将对象作为React子元素渲染的情况，可按以下步骤排查修复： #

1. 修正JSX根节点包裹问题 #

React组件的return语句只能返回单个根元素，你当前代码中将表单主体、提示容器、提交按钮三个同级元素直接返回未包裹，会触发结构异常。可以用React Fragment或者Chakra UI的Box组件包裹所有内容，同时优化条件渲染逻辑，避免初始状态误显示错误提示：

export const ContactForm = () => {
  const [status, setStatus] = useState<string>("");

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    // 提交前先重置状态，避免旧提示残留
    setStatus("");
      
    // 其他表单逻辑
    const { error } = await res.json();
    
    if (error) {
      setStatus("error");
      return;
    }
    setStatus("success");
  }

  return (
    {/* 用Box包裹所有同级元素，也可以用<></>空标签 */}
    <Box>
      {/* 表单主体代码 */}

      <div>
        {status === "success" && <SuccessMessage>Message sent successfully</SuccessMessage>}
        {status === "error" && <ErrorMessage>An error occured</ErrorMessage>}
      </div>

      {/* 提交按钮代码 */}
    </Box>
  );
};

2. 移除JSX中多余的分号 #

你使用布尔状态控制显隐的写法里，组件末尾的分号属于语法错误，在JSX的{}表达式内部不允许添加多余的分号，修正后写法如下：

// 正确写法，移除分号
{ success && <SuccessMessage>success</SuccessMessage> }
{ error && <ErrorMessage>error</ErrorMessage> }

3. 检查自定义组件实现 #

确认SuccessMessage和ErrorMessage组件正确接收children属性并渲染为React节点，不要直接返回对象类型的值，参考实现如下：

import { Alert, AlertDescription } from "@chakra-ui/react";

const SuccessMessage = ({ children }: { children: React.ReactNode }) => {
  return (
    <Alert status="success">
      <AlertDescription>{children}</AlertDescription>
    </Alert>
  )
}

const ErrorMessage = ({ children }: { children: React.ReactNode }) => {
  return (
    <Alert status="error">
      <AlertDescription>{children}</AlertDescription>
    </Alert>
  )
}

4. 排查其他可能原因 #

如果以上修改后仍然报错，检查是否在代码中直接渲染了后端返回的error对象，比如不小心写了<ErrorMessage>{error}</ErrorMessage>而error是对象类型，需要改为{error.message}取字符串内容再渲染。

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