I'm making a page for posts that can be viewed by newest or most likes.

I manage this with drop-down lists and arrays.

And whenever the dropdown list is clicked, I have to force update this to match its value.

async selectPosts ({...} = {}, forceUpdate = false) {
        let goodOrderByDir = 'desc'
        let dateOrderByDir = 'desc'
        const db = getFirestore()
        let constraints = [ //This array determines the viewing order.
            orderBy('date', dateOrderByDir), orderBy('good', goodOrderByDir)]

        var hw = document.getElementById('dropDowmListID') //It is linked to a drop-down list.
        hw.addEventListener('change', function() {
            if (hw.value == 1) { //newest
                constraints = [
                    orderBy('date', dateOrderByDir), orderBy('good', goodOrderByDir)]
            }
            if (hw.value == 2) { //most likes
                constraints = [
                    orderBy('good', goodOrderByDir), orderBy('date', dateOrderByDir)]
            }
        })
        if (forceUpdate) {
            this._lastSelectPostsOptions = {}
        }

        constraints.push(limit(pageSize))
        const queryRef = query(collection(db, 'posts'), ...constraints)
        return Promise.all((await getDocs(queryRef)).docs.map(async item => {
            this._lastSelectPostsDoc = item
            const data = item.data()
            return {
                ...data
            }
        }))
    }

When doing a forced update, the default value is false in the current code.

async selectPosts ({...} = {}, forceUpdate = false)

So when I change the dropdown list I was told it must be true to get the next value.

So I changed the code like this

async selectPosts ({...} = {}, forceUpdate = true)

But I couldn't get the value I wanted...

How can I force an update to apply the changed array values?