Arrays 如何使用不同的键呈现静态json数据

下面是一个静态json数据的示例

我无法从数组中渲染“promoimage”

我不是100%确定如何着手解决这个问题。我在玩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": "#"
    },
]

我的反应组件：

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>  
  )
}

从“../product data.json”导入产品；
...
导出常量CustomSlider=（）=>{
//我用的是react slick
const productList=products.map（（产品，i）=>{
const uniqueItems=[]；
if（uniqueItems.indexOf（product.imageone）=-1）{
uniqueItems.push（product.imageone）；
}
/*这很有效
if（product.hasOwnProperty（'promoimage'））{
返回真值
}
*/
返回；
}
);
返回(
{productList}
)
}

代码将所有对象密钥作为道具发送到

产品。特别是这一部分
{…product}
扩展为：



这叫做传播

现在，我怀疑
不知道如何处理
promoimage
，但知道如何处理
image
。我们没有发送任何
图像
，因此我们必须修复该问题。我们可以通过修改产品使其呈现
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}
    />
  )
})

const productList=products.map（（产品，i）=>{
const uniqueItems=[]
if（uniqueItems.indexOf（product.promoimage）=-1）{
uniqueItems.push（product.promoimage）
}
返回(
)
})
代码将所有对象密钥作为道具发送到
产品。特别是这一部分
{…product}
扩展为：



这叫做传播

现在，我怀疑
不知道如何处理
promoimage
，但知道如何处理
image
。我们没有发送任何
图像
，因此我们必须修复该问题。我们可以通过修改产品使其呈现
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}
    />
  )
})

const productList=products.map（（产品，i）=>{
const uniqueItems=[]
if（uniqueItems.indexOf（product.promoimage）=-1）{
uniqueItems.push（product.promoimage）
}
返回(
)
})
不错，这个很管用。我尝试了一些简单的方法来检查hasOwnProperty，
if（product.hasOwnProperty（'promoimage'）{return true}
，发现最后一项消失了。不知道为什么。我已经在上面添加了代码。但我理解你的解决办法。非常感谢。很高兴听到这个消息。你也可以接受回复作为解决方案。不错，这很有效。我尝试了一些简单的方法来检查hasOwnProperty，
if（product.hasOwnProperty（'promoimage'）{return true}
，发现最后一项消失了。不知道为什么。我已经在上面添加了代码。但我理解你的解决办法。非常感谢。很高兴听到这个消息。您也可以接受答复作为解决方案。