React组件如何正确使用父组件传入prop调用filter方法

• 类型不匹配：父组件传入的month大概率是字符串类型（比如从路由参数、表单控件取的值默认是字符串格式），而Date.prototype.getMonth()返回的是0-11范围的数字类型值。使用严格相等===比较时，字符串"4"和数字4不会判定为相等，导致过滤条件始终不成立。你硬编码时写的是数字字面量4，类型匹配所以能正常返回结果。你可以在现有代码中执行console.log(typeof month)验证，大概率会输出string。
• 依赖数组配置错误：你给useEffect传入了空依赖数组[]，对应的逻辑只会在组件首次挂载时执行1次。如果首次挂载时incomeData或者month还没完成初始化（比如父组件是异步拉取数据后才传值），后续值更新时过滤逻辑不会重新触发。
• 额外提示：getMonth()的返回值是0基的，也就是1月返回0、12月返回11，如果你传入的month是日常计数的1-12格式，需要减1才能正确匹配，你硬编码4能拿到预期结果说明当前传值是0基格式，可以自行核对。

过滤派生数据不需要放在useEffect里，用useMemo缓存计算结果即可，自动跟随依赖更新，性能更好：

// 记得先从react导入useMemo
import { useMemo } from 'react'

const MonthlyIncome = ({incomeData, month}) => {
    // 依赖变化时自动重新计算过滤结果
    const incomes = useMemo(() => {
        // 边界判断：数据不存在时直接返回空数组
        if (!incomeData || !month) return []
        // 统一转成数字类型，避免类型不一致导致匹配失败
        const targetMonth = Number(month)
        return incomeData.filter(item => {
            // 空值保护，避免date字段不存在时抛出错误
            const itemMonth = new Date(item?.date).getMonth()
            return itemMonth === targetMonth
        })
    }, [incomeData, month]) // 把逻辑中用到的外部值全部加入依赖数组

    // 直接使用incomes渲染即可，不需要额外存状态
    console.log('过滤后的收入列表：', incomes)

    return <div>{/* 你的渲染逻辑 */}</div>
}

如果你一定要用useEffect实现（不推荐，会增加额外的状态更新开销），需要补全依赖、统一类型，把过滤结果存在state中使用：

import { useEffect, useState } from 'react'

const MonthlyIncome = ({incomeData, month}) => {
    const [incomes, setIncomes] = useState([])

    useEffect(() => {
        if (!incomeData || !month) {
            setIncomes([])
            return
        }
        const targetMonth = Number(month)
        const filterRes = incomeData.filter(item => {
            return new Date(item?.date).getMonth() === targetMonth
        })
        setIncomes(filterRes)
    }, [incomeData, month]) // 补全依赖数组

    return <div>{/* 你的渲染逻辑 */}</div>
}

内容的提问来源于stack exchange，提问作者Cip