React Hook "useState" 不能在回調中調用。 使用 useMediaQuery 響應式 JS 媒體查詢

Question

我正在嘗試使用useMediaQuery使用響應式 javascript 媒體查詢，但是我無法讓它工作，我得到：-

錯誤消息： "useState" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function "useState" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function

游樂場https://stackblitz.com/edit/react-ts-5vseqr?file=media-query.ts

我認為它在media-query.ts第 4 行media-query.ts

import { useState, useEffect } from 'react'

const useMediaQuery = (query: string) => {
    const [match, setMatch] = useState(false)

    useEffect(() => {
        const updateMatch = () => setMatch(window.matchMedia(query).matches)

        updateMatch()
        window.matchMedia(query).addEventListener('change', updateMatch)

        return () => {
            window.matchMedia(query).removeEventListener('change', updateMatch)
        }
    }, [query])

    return match
}

export default useMediaQuery

Answer 1

你在這里所做的是編寫一個自定義鈎子（useMediaQuery）。 你做得很好，所以沒有問題。 上面的代碼剪下來很好。

當您嘗試使用您編寫的上述自定義掛鈎時，問題出在 index.tsx 文件中。 由於錯誤表明您的自定義鈎子在 index.tsx 的第 7 行中的 react 組件之外被調用。

您必須在 App 組件內移動 useMediaQuery 調用。 此外，目前您的 App 組件是一個類組件，您必須將其轉換為功能組件才能在其中使用鈎子。

這是調整后的代碼： https : //stackblitz.com/edit/react-ts-m6rwpd?file=index.tsx