React 渲染：对象作为 React 子对象无效

IT技术 javascript reactjs
2021-03-31 14:37:30

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

它给了我一个错误：“对象作为 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'));
4个回答

问题是因为你回来了 

return (
        {items} 
    )

这相当于return ({items: items})ie。您正在返回一个带有键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 (
        <div>{items}</div> 
    )
是里面item还是items里面React.Fragment？
2021-06-03 14:37:30
@Raviteja，更新了我的答案，我希望现在清楚了，我应该是映射结果
2021-06-19 14:37:30 
return (
        {items} 
    )

  1. 在上面的行中，您呈现“项目”列表。您应该呈现您从“项目”列表的地图功能创建的“项目”列表。

  2. 你应该把它渲染成一个元素。

    class ShopItem 扩展了 React.Component {

    渲染（）{ var items = [ {链接：'第一个链接'，标题：'Emery NEM XF'，价格：'$ 950'}，{链接：'第二个链接'，标题：'Emery NEM XF'，价格：' $950' }, { 链接：'第三个链接'，标题：'Emery NEM XF'，价格：'$950' } ];

     const item = items.map((i) =>{

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

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

    } }

ReactDOM.render( , document.querySelector('#root'));

您需要items在 return 语句中包含 JSX：

return (
    <React.Fragment>
        {items}
    </React.Fragment>
)

您的最终 return 语句目前不在 JSX 中。这是一个简单的老式 JavaScript，它正在构造一个对象，就像{items: items}多亏了增强的对象文字，这就是为什么 React 说你给它一个带有 key 的项目items。

干得好：

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

编辑：在react中，返回/渲染不能有像

<h1>{i.title}</h1>
<h1>{i.title}</h1>
<h1>{i.title}</h1>

您应该将它们包装在一个<div>或另一个元素中。你 JS 也错了，我更正了

@RossAllen 正确，写得很快。没注意。将编辑
2021-05-26 14:37:30
您传递给的函数map应该使用大括号或删除return关键字。现在它是无效的语法。
2021-06-21 14:37:30
其它你可能感兴趣的问题
上一篇postcss 7.0.0 - 8.2.9 严重性：中度正则表达式拒绝服务 下一篇尝试访问数组后，返回的 React 组件无法读取 null 的属性 '__reactInternalInstance$