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

Question

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

它给了我一个错误：“对象无效作为React子对象（找到：具有键{objectss}的对象）。如果你想渲染一个子集合，请使用数组。” 为什么{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'));

Answer 1

问题是因为你回来了

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 (
        <div>{items}</div> 
    )

Answer 2

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

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

你的最终return语句目前不在JSX中。 由于增强的对象文字 ，这是一个简单的旧JavaScript构建像{items: items}这样的对象 ，这就是为什么React说你给它一个带有关键items 。

Answer 3

干得好：

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

编辑：在反应中，返回/渲染不能有像这样的结构

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

你应该将它们包装在<div>或其他元素中。 你纠正的JS也错了

Answer 4

return (
        {items} 
    )

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

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

   class ShopItem扩展了React.Component {

   render（）{var items = [{link：'first link'，title：'Emery NEM XF'，price：'$ 950'}，{link：'second link'，title：'Emery NEM XF'，price：' $ 950'}，{link：'第三链接'，标题：'Emery NEM XF'，价格：'$ 950'}];

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

   }}

ReactDOM.render（，document.querySelector（'＃root'））;