【React Hook s】useCallbackによるクローズド問題の実践方案について

問題の説明

//     ，  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 (
        <>
             {setSearchID(searchID + 1)}} >button1
             {onSearchInfos()}}>button2
        >
    )
}

export default Test

上記には簡単な擬似コード機能が書いてあります.大体、button 1ボタンをクリックして、search IDの値を1加算して、button 2をクリックして要求を送ります.説明を開始します.私たちは4回ブット1をクリックして、search IDの値を4に変更しました.そしてブット2をクリックして、発送した要求は、searhIDの値は0です.
問題の分析
なぜこのような問題が発生しましたか?私たちはuseCallbackを使って要求データのコールバック方法one Search Infosを1つのレイヤーに包んでいます.そして、2番目のパラメータはコンポーネントが初めて作成された時だけを表しています.このコールバック関数は作成されて、性能を向上させます.
振り返ってみると、私は上で何を言いましたか?
初めてのコンポーネントを作成した時だけ、オンSearch Infosが作成されます.初めてですつまりsearch IDが取得した値は初めて作成された時に、着信した値がクローズドになります.
ソリューション1

interface IRef {
    current: any
}

let Test = () => {
    /** Search base infos */
    const [searchID, setSearchID] = useState(0)

    /**        */
    const fetchRef: IRef = useRef() // hooks            ，     current  
    fetchRef.current = { //   current        searchID，  searchID       ，Test        ，  current       
        searchID
    }

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

    return (
        <>
             {setSearchID(searchID + 1)}} >button1
             {onSearchInfos()}}>button2
        >
    )
}

export default Test

ソリューション2
クリックして他の記事を見てください.
ソリューション3
私が知っている限りでは、今は少なくとも二つの解決案があります.隣の人と討論し終わったばかりで、まだ研究に間に合いません.週末に研究して、その後改善します.
転載先:https://www.cnblogs.com/fe-linjin/p/11402288.html