Блог

У меня есть список продуктов, которые я хочу отобразить в виде карточки. Фон карты должен быть таким: Зеленый, Синий, Красный, Фиолетовый, Зеленый, Синий, Красный, Фиолетовый и т. Д. и т. Д.

 products.map(item =gt; (  lt;div style="background-color: {bgColor}"gt;   lt;h1gt;{item.name}lt;h1gt;  lt;/divgt;  { bgColor === 'green'amp;amp; setBgColor('blue')}  { bgColor === 'blue' amp;amp; setBgColor('red')}  { bgColor === 'red' amp;amp; setBgColor('purple')}  { bgColor === 'purple' amp;amp; setBgColor('blue')} ))}  

Этот код, очевидно, не работает, потому что он окажется в бесконечном цикле.

Но, по сути, я бы хотел, чтобы функция map учитывала, в каком состоянии находится цвет, и для СЛЕДУЮЩЕГО рендеринга в массиве продуктов изменила цвет на другой.

Логически, я пытаюсь сказать приведенный ниже код для каждого элемента карты

 if (bgColor === 'green') {   setBgcolor: 'blue'  return } if (bgColor === 'blue') {   setBgcolor: 'red'  return } if (bgColor === 'red') {   setBgcolor: 'purple'  return } if (bgColor === 'purple') {   setBgcolor: 'green'  return }  

Однако я открыт для совершенно других методов реализации этого..

Если я правильно понял вашу проблему, вы можете создать карту цветов на основе остатка, когда разделите элемент index на 4.

Этот код должен отображаться «синим», когда индекс элемента равен 0/4/8… и т. Д.

 const colorMap = {  0: 'blue',  1: 'red',  2: 'green',  3: 'purple' }  products.map((item, index) =gt; (  lt;div style="background-color: {colorMap[index % 4]}"gt;   lt;h1gt;{item.name}lt;h1gt;  lt;/divgt; ))}