使用React自定义Hook时触发'Objects are not valid as a React child'错误求助

错误根源 #

这个报错的核心原因是你把useField返回的整个对象直接作为React子元素渲染了，或者在传递input属性时错误地传入了整个对象而非对象里的具体属性。useField返回的是包含type、value、onChange等键的对象，React无法直接渲染这种对象，因此抛出错误。

正确的实现与用法 #

1. 确认useField的正确实现 #

按照教程要求，useField应该返回表单输入所需的属性和重置方法，示例实现如下：

import { useState } from 'react'

const useField = (type) => {
  const [value, setValue] = useState('')

  const onChange = (event) => {
    setValue(event.target.value)
  }

  const reset = () => {
    setValue('')
  }

  return {
    type,
    value,
    onChange,
    reset
  }
}

2. CreateNew组件的正确用法 #

在组件中，你需要将useField返回的对象通过展开运算符传递给input标签，或者单独传递每个属性（必须是对象里的具体值，而非整个对象）。示例代码：

const CreateNew = ({ addNew }) => {
  const content = useField('text')
  const author = useField('text')
  const info = useField('text')

  const handleSubmit = (e) => {
    e.preventDefault()
    addNew({
      content: content.value,
      author: author.value,
      info: info.value,
      votes: 0
    })
    content.reset()
    author.reset()
    info.reset()
  }

  return (
    <form onSubmit={handleSubmit}>
      <div>
        内容: <input {...content} />
      </div>
      <div>
        作者: <input type={author.type} value={author.value} onChange={author.onChange} />
      </div>
      <div>
        详情: <input {...info} />
      </div>
      <button type="submit">创建新轶事</button>
    </form>
  )
}

常见错误排查 #

如果你尝试单独传递属性后仍报错，检查以下几点：

• 不要把整个useField对象传给value属性，比如错误写法：<input value={content} />，正确应该是value={content.value}
• 不要在JSX中直接渲染useField对象，比如错误写法：<div>{content}</div>，这会把整个对象当成子元素，React无法解析
• 确认handleSubmit中获取的是content.value而非content，否则提交的是整个对象而非输入值

关于教程文档 #

教程文档没有错误，问题出在对自定义Hook返回值的用法理解上，只要确保不把返回的对象直接作为React子元素，而是正确传递给表单输入的属性即可。

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