【React hooks】关于useCallback带来的闭包问题实践方案

最新推荐文章于 2024-07-24 08:04:56 发布

dongfen4333

最新推荐文章于 2024-07-24 08:04:56 发布

阅读量1.1k

点赞数 1

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/fe-linjin/p/11402288.html

版权

本文探讨了在React应用中使用useCallback钩子时遇到的闭包问题，具体表现为更新state后的值在回调函数中未正确反映。问题源于useCallback的缓存特性，导致回调函数捕获了初始状态的state。文章提供了三种解决方案，并指出还有其他可能的解决策略，计划后续研究。

摘要由CSDN通过智能技术生成

问题描述

// 举个栗子，我用hooks 写了这么一个组件
let Test = () => {
    /** Search base infos */
    const [searchID, setSearchID] = useState(0)

    /** Search info action */
    const onSearchInfos = useCallback(() => {
        let fetchUrl = '/api/getSearchInfos'
        let fetchParams = { searchID }
        fetch(fetchUrl, {
            method: 'POST',
            body: JSON.stringify(fetchParams)
        }).then(res => res.json()
        ).then(res => {
           console.log(res)
        })
    }, [])

    return (
        <>
            <button onClick={() => {setSearchID(searchID + 1)}} >button1</button>
            <button onClick={() => {onSearchInfos()}}>button2</button>
        </>
    )
}

export default Test

上述写了一个很简单的伪代码功能，大致就是࿰