React Hook状态变更无法通知使用该Hook的组件问题

我编写了如下自定义React Hook：

export default function useCustomHook() {
    const initFrom = localStorage.getItem("startDate") === null? moment().subtract(14, "d"): moment(localStorage.getItem("startDate"));
    const initTo = localStorage.getItem("endDate") === null? moment().subtract(1, "d"): moment(localStorage.getItem("endDate"));
    
    const [dates, updateDates] = React.useState({
        from: initFrom,
        to: initTo
    });

    const [sessionBreakdown, updateSessionBreakdown] = React.useState(null);

    React.useEffect(() => {
        api.GET(`/analytics/session-breakdown/${api.getWebsiteGUID()}/${dates.from.format("YYYY-MM-DD")}:${dates.to.format("YYYY-MM-DD")}/0/all/1`).then(res => {
            updateSessionBreakdown(res.item);
            console.log("Updated session breakdown", res);
        })
    },[dates])

    const setDateRange = React.useCallback((startDate, endDate) => {
        const e = moment(endDate);
        const s = moment(startDate);
        localStorage.setItem("endDate", e._d);
        localStorage.setItem("startDate", s._d);
        updateDates((prevState) => ({ ...prevState, to:e, from:s}));
    }, [])

    const getDateRange = () => {
        return [dates.from, dates.to];
    }
    
    return [sessionBreakdown, getDateRange, setDateRange]
}

调用setDateRange函数时，网络请求正常发起且能获取到API返回结果，控制台也能看到请求完成的日志，但使用该Hook返回的sessionBreakdown的多个组件并未随之更新。

1. 确保状态更新使用新对象引用 #

最可能的原因是API返回的res.item与当前sessionBreakdown的引用相同（比如后端复用对象或前端缓存导致）。React的状态更新基于浅比较，若引用未发生变化，React会判定状态无更新，不会触发组件重渲染。

修改useEffect中的更新逻辑，创建新的对象引用：

React.useEffect(() => {
    api.GET(`/analytics/session-breakdown/${api.getWebsiteGUID()}/${dates.from.format("YYYY-MM-DD")}:${dates.to.format("YYYY-MM-DD")}/0/all/1`).then(res => {
        // 通过展开运算符创建新对象，强制更新引用
        updateSessionBreakdown({ ...res.item });
        console.log("Updated session breakdown", res);
    })
},[dates])

如果res.item是嵌套复杂对象，可使用JSON.parse(JSON.stringify(res.item))或Lodash的cloneDeep进行深拷贝。

2. 优化getDateRange的稳定性 #

getDateRange未用useCallback包裹，会导致每次Hook渲染时生成新的函数实例。若组件将其作为依赖项（如useEffect或useCallback），可能引发不必要的重渲染，甚至干扰状态更新的判断。

用useCallback包裹getDateRange并添加正确依赖：

const getDateRange = React.useCallback(() => {
    return [dates.from, dates.to];
}, [dates.from, dates.to])

3. 检查组件的渲染逻辑 #

确认使用sessionBreakdown的组件未通过React.memo或其他方式错误阻止重渲染，且组件直接依赖sessionBreakdown状态，而非通过未更新的变量间接获取数据。

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