根據Cookie多次渲染組件

Question

因此，我試圖創建一個購物車來顯示保存在Cookie中的商品。 這是我所擁有的：

function safe_item(name) {
document.cookie += 'item name: ' + name + '?';
}

該函數由onClick事件調用，但是我想沒關系，因為我的console.log（document.cookie.split（'？'））正確返回數據：

0: "item name: Blekk BROTHER LC1000 Value Pack"
1: "item name: Blekk BROTHER LC1000 Value Pack"
2: "item name: Blekk BROTHER LC1000Y gul"
3: "item name: Blekk BROTHER LC1100 Value sort+CMY (4)"
4: "item name: Blekk BROTHER LC1000 Value Pack"
5: "item name: Blekk BROTHER LC1280XLC blå"
6: "item name: Blekk BROTHER LC1280XLM rød"
7: "item name: Blekk BROTHER LC1280XLC blå"
8: "item name: Blekk BROTHER LC1280XLC blå"
9: "item name: Blekk BROTHER LC1280XLM rød"

現在，我想使用Cookie中的項目名稱來呈現組件：

let cookie = document.cookie.split('?');

function InCart() {
for (let i = 0; i < cookie.length; i++) {
return (
  <ItemInCart>
      <InCartFont>{cookie[i].item name}</InCartFont>
      <CartRemove>
        <CartX>x</CartX>
        <br></br>
        remove
      </CartRemove>
    </ItemInCart>
  )
  }
  }

  export default InCart;

當我運行我的應用程序時，它會按預期呈現，但只有一次且為空。 雖然我需要循環此過程並從cookie中插入項目名稱。

console.log（cookie）提供良好的輸出，我缺少什么？

Answer 1

您不能多次return 。 使用帶有map()的單return代替：

function InCart() {

return (
<div>
{ cookies.map( cookie =>
  (<ItemInCart>
      <InCartFont>{cookie.item name}</InCartFont>
      <CartRemove>
        <CartX>x</CartX>
        <br></br>
        remove
      </CartRemove>
    </ItemInCart>)
</div>
  ))
  }
  }

  export default InCart;