React Error #31：对象解构引发‘对象不可作为React子元素’问题求解

错误核心原因 #

这个错误的本质是你在JSX中直接渲染了对象类型的值——React只能渲染字符串、数字、React元素、数组（元素的数组）这类可序列化的内容，对象无法被直接转换为DOM节点。结合你的表单验证场景，大概率是自定义useInput Hook返回的验证相关对象（比如错误信息对象）被你直接放到JSX里输出了。

无需重构为数组的解决方案 #

1. 精准渲染对象中的具体属性 #

检查所有JSX渲染逻辑，找到直接输出对象的地方，替换为对象的具体属性。
比如你的useInput Hook返回结构如下：

function useInput() {
  const [value, setValue] = useState('');
  const [error, setError] = useState(null);

  const handleChange = (e) => {
    setValue(e.target.value);
    // 验证逻辑，错误时设置对象类型的error
    if (!e.target.value.trim()) {
      setError({ message: '此字段不能为空', valid: false });
    } else {
      setError(null);
    }
  };

  return { value, handleChange, error };
}

组件调用时错误写法（直接渲染error对象）：

const emailInput = useInput();
<input value={emailInput.value} onChange={emailInput.handleChange} />
<div>{emailInput.error}</div> {/* 这里会触发错误 */}

正确写法（只渲染对象中的message属性）：

const emailInput = useInput();
<input value={emailInput.value} onChange={emailInput.handleChange} />
{emailInput.error && <div className="error-text">{emailInput.error.message}</div>}

2. 调整Hook返回值（可选） #

如果希望简化组件中的调用，可以在useInput Hook里直接返回可渲染的错误文本，而不是对象：

function useInput() {
  // ... 其他逻辑
  const [errorText, setErrorText] = useState('');

  const handleChange = (e) => {
    setValue(e.target.value);
    if (!e.target.value.trim()) {
      setErrorText('此字段不能为空');
    } else {
      setErrorText('');
    }
  };

  return { value, handleChange, errorText };
}

组件中直接渲染：

{emailInput.errorText && <div className="error-text">{emailInput.errorText}</div>}

3. 排查列表渲染中的误用 #

如果是循环渲染表单字段时触发错误，检查是否把整个字段配置对象当成了子元素：
错误写法：

const formFields = [
  { label: '用户名', name: 'username' },
  { label: '邮箱', name: 'email' }
];
formFields.map(field => <div>{field}</div>) {/* 直接渲染对象，触发错误 */}

正确写法：

formFields.map(field => (
  <div key={field.name}>
    <label>{field.label}</label>
    <input name={field.name} {...useInput()} />
  </div>
))

4. 快速调试方法 #

用console.log输出你怀疑的变量，确认是否为对象：

const emailInput = useInput();
console.log(emailInput.error); // 看控制台输出是否为对象，定位问题点

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