Реагируйте, как визуализировать данные stati c json с разными ключами

Question

Вот пример данных о состоянии c json.

У меня проблемы с рендерингом ' promoimage ' из массива.

Я не уверен на 100%, как go решить эту проблему. Я играл в arround и хотел проверить, существует ли «promoimage», но ничего не было возвращено? Любой совет, как этого добиться?

[
    {
        "title": "some title",
        "promoimage": "image.jpg",
        "url": "#"
    },
    {
        "title": "some title",
        "image": "example.jpg",
        "url": "#"
    },
{
        "title": "some other title",
        "promoimage": "image.jpg",
        "url": "#"
    },
    {
        "title": "title",
        "image": "example.jpg",
        "url": "#"
    },
]

Мой компонент React:

import products from '../product-data.json';
...
export const CustomSlider = () => {
   // Here I'm using react-slick 

 const productList = products.map((product, i) => {
    const uniqueItems = [];
    if (uniqueItems.indexOf(product.imageone) === -1) {
        uniqueItems.push(product.imageone);
    }

   /* This works
     if (product.hasOwnProperty('promoimage')) {
      return true
    }
   */

         return <Product key={i} {...product} />;
        }
    );

  return (
      <Slider>
        {productList}
      </Slider>  
  )
}

Answer 1

Код отправляет все ключи объекта на Product в качестве реквизита. В частности, эта часть {...product} расширена до следующей:

<Product 
  key={i}
  title="some title"
  promoimage="image.jpg"
  url="#"
/>

Это называется распространением.

Теперь, я подозреваю, <Product> не знает, что делать с promoimage, но знает, что делать с image. Мы не отправили image, поэтому мы должны это исправить. Мы можем сделать это либо изменив product так, чтобы он отображал image || promoimage, либо изменив наш синтаксический анализ на следующий:

const productList = products.map((product, i) => {
  const uniqueItems = []

  if (uniqueItems.indexOf(product.promoimage) === -1) {
    uniqueItems.push(product.promoimage)
  }

  return (
    <Product
      key={i}
      {...product}
      image={product.image || product.promoimage}
    />
  )
})