使用.gin。在JavaScript中操纵一系列对象的问题

Question

我一直试图解决此问题一段时间，但无法弄清楚。 我从API中收到了一些产品，在解构后，我将它们传递到了一些HTML标签中，从JS这样的JS对其进行操作...

    displayProducts(products){
        let result = '';
        products.forEach(product => {
            result += `
            <article class="product">
                <div class="img-container">
                    <img src=${product.image} alt="product" class="product-img">
                    <button class="bag-btn" data-id= ${product.id}>
                         <img src="./images/icons8_add_shopping_cart_100px.png" 
                         width="16px" max-width= "18px" alt="add to cart"/>
                         Add to cart
                    </button>
                </div>
                <div class="goodsinfo">
                    <span class="description"> <img src="./images/icons8_eye_100px.png" class="view" data-class=${product.id}/> 
                    </span>
                    <span class="titleprice">
                        <h3>${product.title}</h3>
                        <h4>#${product.price}</h4>
                    </span>
                </div>
            </article>
            `
        });
        productsDOM.innerHTML = result;

    }

然后我开始操纵，但是我使用.find rand array方法遇到了一个问题，以匹配。具有来自对象数组的ID，即使它们完全相同。

 compileDescription(products){
        console.log(products) // this works fine and displays 16 products which are 16 objects in arrays.

        const eyeView = [...document.querySelectorAll('.view')];
        
        eyeView.forEach(viewBtn=>{
        viewBtn.addEventListener('click', (event)=>{
        const btnId = event.target.dataset.class
        console.log(btnId); //this works and shows the ID of the clicked button

        const productFind = products.find(product=> product.id === btnId) 

        console.log(productFind); //returns undefined
        }) 
        })
   
    }

我想要的是，当单击具有特定ID的按钮时，ID与对象数组中的对象的ID匹配，并且对象将返回给我进行操作。 请帮助我。谢谢。