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