為什么反應中的匹配媒體無法正常工作？

Question

各位朋友請幫幫我

我正在 JavaScript 中測試媒體查詢，但它不能正常工作。 條件滿足之前有一個度量，例如：

如果是min-with: 992px ，則當屏幕超過 893px 的寬度時滿足條件。

為什么會這樣？ 如果它完美運行，則在香草 JavaScript 中工作。

代碼

const mql = window.matchMedia("(min-width: 992px)");
   
    useEffect(() => {
      
        mql.addEventListener("change", resize);
        function resize(e) {
            if (e.matches) { // If media query matches
             
                console.log(window.screen.width);
               
            }
        }
        return () => {
            mql.removeEventListener("change", resize);
        }
    },[mql]);

捕獲

Answer 1

這行得通。 經過測試

  useEffect(() => {
      const mql = window.matchMedia("(min-width: 992px)");
      mql.addEventListener("change", resize);
      function resize(e) {
          if (e.matches) { // If media query matches
              console.log("more than 992");
          } else {
             console.log("less than 992")
          }
      }
      return () => {
          mql.removeEventListener("change", resize);
      }
  },[]);