React.js 错误：“对象作为 React 子项无效（找到：带有键 的对象）。”

Posted 2023-02-27

【中文标题】React.js 错误：“对象作为 React 子项无效（找到：带有键 的对象）。”

【英文标题】：React.js Error: " Objects are not valid as a React child (found: object with keys )."React.js 错误：“对象作为 React 子项无效（找到：带有键 的对象）。”

【发布时间】：2020-08-26 20:03:45

【问题描述】：

我使用 API“https://www.definitions.net/definitions_api.php”制作了一个 react.js 应用。 当我记录 data.result 时，它会输出正确的结果数组，但是当我映射状态时，我收到此错误：“对象作为 React 子项无效（找到：带有键 的对象）。如果你的意思是要渲染一组孩子，请改用数组。”

//states
  const [definition, setDefinition] = useState([])
  const [search, setSearch] = useState('')
  const [query, setQuery] = useState('')

  useEffect(() => 
    getDef()
   , [query])


//FETCH
  const getDef = async () => 
  const response = await fetch(`....`)
  const data = await response.json()
  setDefinition(data.result);

//handle input
  const updateSearch = e => 
    setSearch(e.target.value)

  

//get the final query onSubmit
const getQuery = e =>
  e.preventDefault()
  setQuery(search)
  setSearch('')



 return (

   definition && definition.map(item => (
       <Definition term=item.term 
                  partofspeech = item.partofspeech
                  definition=item.definition 
                  example = item.example                 
             />

            )
         )
        

  );

在定义组件中，我解构了道具：

function Definition(term, partofspeech, definition, example) 
    return (
        <div className="definition">
            <h4>term (partofspeech)</h4>
              <p>definition</p>
               <p>example</p>

        </div>
    )

欢迎任何帮助，谢谢。

【问题讨论】：

这是什么`

在其中一个变量中，您正在尝试渲染一个对象。这就是 React 告诉你的。你能发布`data.result`的值吗？

@KevinAmiranoff data.result logs: (33) 0: term: "cat, true cat", definition: "feline mammal usually having thick soft fur and no ability to roar: domestic cats; wildcats", example: …, partofspeech: "noun" 1: term: "guy, cat, hombre, bozo", definition: "an informal term for a youth or man", example: ""a nice guy"; "the guy's only doing it for some doll"", partofspeech: "noun"

数据日志：result: Array(33) result: Array(33) 0: term: "cat, true cat", definition: "feline mammal usually having thick soft fur and no ability to roar: domestic cats; wildcats", example: …, partofspeech: "noun" 1: term: "guy, cat, hombre, bozo", definition: "an informal term for a youth or man", example: ""a nice guy"; "the guy's only doing it for some doll"", partofspeech: "noun"

example: …, 这可能是我认为的问题

【参考方案1】：

作为回报，你同时拥有() 圆形和卷曲，你可以删除两者，你应该直接返回

return definition && definition.map(item => (
       <Definition term=item.term 
            partofspeech = item.partofspeech
            definition=item.definition 
            example = item.example                 
        />
    ));

---

短sn-p，可以运行查看：

const  useState  = React;

const App = () => 

  const [users,setUsers] = useState(['Vivek' , 'Darshita', 'Darshvi' , 'Coming..']);

  return users.map(user => <p>user</p>);


ReactDOM.render(<App />, document.getElementById('react-root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react-root"></div>

【参考方案2】：

试试这个，当你循环组件循环不带根元素的定义时，会报错

const Component = () => 
  ....
  return (
    <Fragment>
       definition && definition.map(item => (
       <Definition term=item.term 
                  partofspeech = item.partofspeech
                  definition=item.definition 
                  example = item.example                 
             />

            )
         )
        

  )
    </Fragment>
  )

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>