Рендеринг реагирующих компонентов несколько раз на основе куки

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 несколько раз. Используйте вместо одного return с map():

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;