获取当前状态值的最佳方法

Question

我想知道获取当前状态值的最佳方法是什么。 我想出了 2 个选项来达到当前值，而不是通过使用 useEffect 挂钩或使用 setState 函数内的功能状态更新来访问当前状态来获取过时的值。

功能状态更新方法

const sortbyChangeHandler = e =>
{
    setSortBy(e.target.value)
    setSortBy(currentSortBy =>{
        if(currentSortBy === 'priceHToL'){
            setProductsList(prodsCatList.sort((a,b)=>b.prodPrice - a.prodPrice))
        }else if(currentSortBy === 'priceLToH'){
            setProductsList(prodsCatList.sort((a,b)=>a.prodPrice - b.prodPrice))
        }
        else if(currentSortBy === 'qtyHToL'){
            setProductsList(prodsCatList.sort((a,b)=>b.totalProdQty - a.totalProdQty))
        }else if(currentSortBy === 'qtyLToH'){
            setProductsList(prodsCatList.sort((a,b)=>a.totalProdQty - b.totalProdQty))
        }
        else if(currentSortBy === 'salesHToL'){
            setProductsList(prodsCatList.sort((a,b)=>b.sales - a.sales))
        }else if(currentSortBy === 'salesLToH'){
            setProductsList(prodsCatList.sort((a,b)=>a.sales - b.sales))
        }
    });
}

此方法似乎不是理想的方法，因为我使用了 setSortBy 函数两次，第一次设置更新状态，第二次仅访问当前状态值。
除了在更新状态时收到警告之外。

警告：渲染不同组件 (

ProductsProvider

) 时无法更新组件 (

ProductsHeader

)。要在

ProductsHeader

中找到错误的 setState() 调用，请按照

中所述跟踪堆栈跟踪

useEffect钩子方法

useEffect(()=>{
    if(prodsCatList.length > 0){
        if(sortBy === 'priceHToL'){
            setProductsList(prodsCatList.sort((a,b)=>b.prodPrice - a.prodPrice))
        }else if(sortBy === 'priceLToH'){
            setProductsList(prodsCatList.sort((a,b)=>a.prodPrice - b.prodPrice))
        }
        else if(sortBy === 'qtyHToL'){
            setProductsList(prodsCatList.sort((a,b)=>b.totalProdQty - a.totalProdQty))
        }else if(sortBy === 'qtyLToH'){
            setProductsList(prodsCatList.sort((a,b)=>a.totalProdQty - b.totalProdQty))
        }
        else if(sortBy === 'salesHToL'){
            setProductsList(prodsCatList.sort((a,b)=>b.sales - a.sales))
        }else if(sortBy === 'salesLToH'){
            setProductsList(prodsCatList.sort((a,b)=>a.sales - b.sales))
        }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
},[sortBy]);

这个方法效果很好。然而，它给了我一个警告。

[eslint] 中的警告 高级