映射 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(',')&nbsp; .filter(Boolean) // this is to filter out falsy values if necessary&nbsp; .map(product_image =>&nbsp; &nbsp; &nbsp; <div key={`${product.id}-${product_image}`}> // concat product id with the image id&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img height='100%' alt='hello' src={`${IMAGE_PATH}${product_image}`} />&nbsp; &nbsp; &nbsp; </div>&nbsp; )}

Answer 2

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