Question

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

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

Answer 1

问题是因为你返回

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>

P.S。请注意，前两种方法适用于react v16.0.0 onwards，而最后一种方法适用于v16.2以上。

但是，如果您使用的是较低版本，则需要将返回元素包装在像

这样的容器中

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

Answer 2

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

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

你的最终回复声明目前不在JSX中。感谢enhanced object literals构建像{items: items}这样的对象的普通旧JavaScript，这就是为什么React说你给它一个带有键items的项目。

Answer 3

你去：

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

编辑：在反应中，return / render不能具有类似

的结构

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

你应该将它们包裹在<div>或其他元素中。还有你错了，我纠正了

Answer 4

return (
        {items} 
    )

在上面的行中，您将呈现“项目”列表。您应该从“项目”列表的地图功能中呈现您创建的“项目”列表。
你应该把它渲染成一个元素。

类ShopItem扩展了React.Component {

render（）{ 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'））;

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

4 个答案: