映射 csv 以在反应中显示数组中的每个项目

Question

我有一张产品表所以我在这里有一列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 和 react 的初学者，如果你们能帮助我，那就太好了。我也对其他有趣的解决方案持开放态度。谢谢

Answer 1

在我看来，您的 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>

  )}

Answer 2

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>

  )