React中useState赋值后无法访问及渲染报错问题排查

第一个错误：Objects are not valid as a React child #

这个报错的核心原因是你把对象类型的值当成了React子元素渲染。看父组件代码：

const error_msg = Validation(postData)  
setErrorMessage(error_msg)

你提到error_msg是错误信息，但实际Validation函数返回的是包含error_msg字段的对象（比如{error_msg: "具体错误内容"}），而非直接返回字符串。当这个对象被赋值给ErrorMessage状态后，React尝试渲染该对象时，就会抛出这个错误。

解决方法：

• 修改Validation函数，让它直接返回错误字符串；
• 若无法修改Validation，则取对象内的error_msg字段赋值：

  const errorResult = Validation(postData)  
  setErrorMessage(errorResult.error_msg)
  

第二个问题：赋值后ErrorMessage仍为空 #

先看props传递：父组件给子组件传setErrorMessage时，额外包装的(error) =>setErrorMessage(error)完全没必要，但这本身不会导致状态不更新。可能的原因有这些：

1. 状态更新是异步的：React的setState是异步操作，调用setErrorMessage后立刻读取ErrorMessage，拿到的还是旧值，这是正常现象，后续渲染时状态会自动更新。
2. 父组件JSX结构错误：你的父组件return的JSX包含两个同级<div>元素，React要求返回的JSX必须有单一根元素，这种情况会导致渲染异常，进而影响状态展示。需要用根元素包裹：

   return (
     <>
       <div>
         <Submit setSomethingElse={somethingElse} setErrorMessage={setErrorMessage} ErrorMessage={ErrorMessage} />
       </div>
       <div className="error-message"> {ErrorMessage}</div>
     </>
   );
   

3. 子组件提交逻辑有问题：检查子组件handleSubmit，首先要阻止form默认提交行为（否则页面会刷新，状态被重置），同时确认setErrorMessage的调用时机没被条件拦截：

   const handleSubmit = async (event) => {
     event.preventDefault(); // 阻止页面刷新
     // ...其他逻辑
     setErrorMessage('Error Message')
     // ...其他逻辑
   }
   

另外，建议状态变量名使用小驼峰命名（比如errorMessage而非ErrorMessage），props也保持一致，更符合React编码规范，减少混淆。

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