React render：对象作为React子对象无效

  • Z时代
  • 2024-01-10
  • 分类：问答

请帮我。我不知道为什么这段代码不起作用。

它给我一个错误：“对象作为React子对象无效（找到：带有键{itemss}的对象）。如果要渲染子对象的集合，请改用数组。”

为什么{i.title}是对象。这只是一个字符串。我怎样才能解决这个问题？以及实际上如何迭代嵌套对象？

class ShopItem extends React.Component {
render() {
    var items = [
        {
            link: 'first link',
            title: 'Emery NEM XF',
            price: '$950'
        },
        {
            link: 'second link',
            title: 'Emery NEM XF',
            price: '$950'
        },
        {
            link: 'third link',
            title: 'Emery NEM XF',
            price: '$950'
        }
    ];
     const item = items.map((i) =>{
          return ( <h1>{i.title}</h1> )
    });
        return (
            {items} 
        )
  }
}
ReactDOM.render(<ShopItem /> , document.querySelector('#root'));

回答：

问题是因为你回来了

return (
        {items} 
    )

这是的等效return ({items: items})即 您将返回具有键items和的对象React doesn't expect

objects for rendering。你可以写

   const items = items.map((i) =>{
      return ( <h1>{i.title}</h1> )
   });
   return items;

要么

     return items.map((i) =>{
        return ( <h1>{i.title}</h1> )
     });

要么

  const items = items.map((i) =>{
      return ( <h1>{i.title}</h1> )
   });
  return <React.Fragment>
        {items} 
    </React.Fragment>

PS请注意，前两种方法将开始起作用，react v16.0.0 onwards而后一种方法将v16.2开始起作用。

但是，如果您使用的是较低版本，则需要将return元素包装在类似

    return (
        <div>{items}</div> 
    )

以上是 React render：对象作为React子对象无效 的全部内容， 来源链接： utcz.com/qa/407723.html

回到顶部