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'））;