如何在 React 組件道具上使用 filter 方法？

Question

我正在嘗試通過數組過濾以提取與特定月份匹配的所有對象。 我已經從父組件傳遞了月份，當我 console.log(month) 在這種情況下它成功返回 4 。

這是我的組件的開頭：

const MonthlyIncome = ({incomeData, month}) => {

    useEffect(()=>{

        console.log(month)
        //returns 4
        console.log('income data', incomeData)

        if (month) {
            const incomes = incomeData?.filter(i=>{
                if(new Date(i?.date).getMonth() === month) {
                    return i
            }})
            console.log('incomes', incomes)
        }
        
    }, [])

console.log('incomes',incomes) 返回一個空數組。

但是，如果我直接在 useEffect 中輸入 4 而不是使用月份，我可以成功地控制台記錄過濾后的數組，如下所示：

const MonthlyIncome = ({incomeData, month}) => {

    
    useEffect(()=>{

        console.log(month)
        //returns 4
        console.log('income data', incomeData)

        if (month) {
            const incomes = incomeData?.filter(i=>{
                if(new Date(i?.date).getMonth() === 4) {
                    return i
            }})
            console.log('incomes', incomes)
        }
        
    }, [])

有誰知道我如何正確地將月份從父組件傳遞到 filter() 方法？

Answer 1

我找到了一個解決方案，我想實際的問題是來自父母的數字是一個字符串，我需要它是一個實際的數字。 所以我用 parseInt() 把它從一個字符串轉換成這樣的數字：

const MonthlyIncome = ({incomeData, month}) => {

    
    useEffect(()=>{
        console.log(month)
        //returns 4
        console.log('income data', incomeData)

        const m = parseInt(month, 10)
       
        const incomes = incomeData?.filter(i=>{
            if(new Date(i?.date).getMonth() === m) {
                return i
        }})
        console.log('incomes', incomes)
        
        
    }, [])