reactjs - 表单提交后显示成功或错误消息（React JS）

Question

我正在使用 Next.Js (React)、Typescript 和 Chakra UI 创建一个联系表单。
我想根据后端的响应在表单提交后显示成功或错误消息。
我为此目的使用 useState() 并有条件地呈现消息，但这似乎不起作用，
我收到此错误

对象作为 React 子级无效。如果您打算渲染一组孩子，请改用数组

这是我的代码导致错误的部分：

export const ContactForm = () => {

     const [status, setStatus] = useState<string>("");
 
     // function to handle form submission
     const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
      
          // some stuff here

          const { error } = await res.json();
          
          // error handling
          if (error) {
              setStatus("error");
              return;
          }

          setStatus("success");
     }

     return (
          // form body here
          
          // here it's failing
          <div>
              {status === "success" ? (
                  <SuccessMessage>{"Message sent successfully"}</SuccessMessage>
              ) : (
                  <ErrorMessage>{"An error occured"}</ErrorMessage>
              )}
          </div>
 
          // submit button
    );
};

SuccessMessage 和 ErrorMessage 是自定义组件

在此处查看错误：

我尝试过的其他一些方法不起作用：

const [success, setSuccess] = useState<boolean>(false);
const [error, setError] = useState<boolean>(false);

if(error) {
    setError(true);
    return;
}

setSuccess(true);

// conditional render
{ success && ( 
     <SuccessMessage>{"success"}</SuccessMessage>;
)}
{ error && ( 
     <ErrorMessage>{"error"}</ErrorMessage>;
)}

这也导致了同样的错误，Objects are not valid as a React child。
如果您打算渲染一组孩子，请改用数组

有什么办法可以做到这一点，任何帮助将不胜感激:)

标签： reactjstypescriptnext.jsuse-state