Javascript 基于Cookie多次呈现react组件

因此，我试图创建一个购物车，显示保存在cookies中的项目。以下是我所拥有的：

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;

let cookie=document.cookie.split（“？”）；
函数infinat（）{
for（设i=0；i

去除
)
}
}
输出默认值；

当我运行我的应用程序时，它会按预期呈现，但只呈现一次且为空。而我需要循环这个过程并从cookies中插入项目名称

---

log（cookie）提供了良好的输出，我缺少什么？

您不能多次返回

。使用带有
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;

函数incontat（）{
返回(
{cookies.map（cookie=>
(
{cookie.item name}
x



去除
)
))
}
}
输出默认值；