Question

我有一个产品表

products table

因此，我在 product_images 中有一列，其中包含ID数组（用作图像源）。我使用道具来映射这些产品，如下所示：

render() {
        return (
            <>
                <ul className="row">
                    {this.props.products
                        .map(product => <li className="card col-md-4" key={product.id}>
                            <h2>{product.name}</h2>
                            <p>{product.description}</p>
                            <p>{product.sub_categories}</p>
                            <b>{product.created}</b>
                            {Object.keys(product.product_images)
                                .filter(v => product.product_images[v] != null)
                                .map(product_image =>
                                    <div key={product.product_images}>
                                        <img height='100%' alt='hello' 
                                        src={"IMAGE_PATH" + product.product_images[product_image]} />
                                    </div>
                                )}
                        </li>)}
                </ul>
            </>
        );
    }

这给了我每个产品。我还想获得的是数组中的每个ID，以在一个产品中显示多个图像。我知道在映射对象时做错了。作为javascript初学者并做出反应，如果你们能帮助我，那将是很棒的。

我也欢迎其他有趣的解决方案。谢谢

Answer 1

Object.values((product && product.product_images) || [])
  .filter(productImgArr => productImgArr !== null)
  .map(productImgArr => productImgArr.join(''))
  .map((product_image, index) =>
      <div key={`${product_image}-${index}`}>
          <img height='100%' alt='hello' 
          src={"IMAGE_PATH" + product_image} />
      </div>
  )

Answer 2

在我看来，您的product_images是产品图片ID的CSV。如果是这种情况，请尝试：

{product.product_images.split(',')
  .filter(Boolean) // this is to filter out falsy values if necessary
  .map(product_image =>
      <div key={`${product.id}-${product_image}`}> // concat product id with the image id
          <img height='100%' alt='hello' src={`${IMAGE_PATH}${product_image}`} />
      </div>
  )}

映射数组的对象以显示react中的数组中的每个项目

2 个答案: