如何在 React 函数中调用自定义 Hook

Cruse 发表于 Dev

克鲁斯

我正在我的项目中处理一个 React 项目我有一个自定义钩子，现在我试图在一个函数中调用该自定义钩子，但它显示这样的错误 React Hook “useMediaQuery” 在函数“applyStyle”中被调用，两者都不是React 函数组件或自定义 React Hook 函数。React 组件名称必须以大写字母开头

所以有人帮我解决这个问题

这是我的代码

这是 App.js

import React, { useState, useLayoutEffect } from 'react';
import './App.css';


const App = () => {
    const [style, setStyle] = useState(null)


    function useMediaQuery() {
        const [screenSize, setScreenSize] = useState([0]);
        
        useLayoutEffect(() => {
          function updateScreenSize() {
            setScreenSize([window.innerWidth]);
          }
          window.addEventListener("resize", updateScreenSize);
          updateScreenSize();
          return () => window.removeEventListener("resize", updateScreenSize);
        }, []);
        
        return screenSize;
      }

      const applyStyle = () => {
          if(useMediaQuery() === 320) {
              setStyle({
                  marginBottom: '150px'
              })
          }
      }

return (
        <div className='container'>
            <div className='row'>
                <div className='col-12'>
                    <div className='first'>
                        <button onClick={applyStyle} style={style}  className='btn btn-primary'>Click here</button>
                        <span className='closeWindow'><i className="far fa-window-close"></i></span>
                    </div>
                    <div className='second'>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default App

````

罗伯特·蒂尔塔

我想你忘记了hook的两个最重要的规则

它说

仅从 React 函数组件调用 Hook。不要从常规 JavaScript 函数调用 Hook。（只有另一个有效的地方可以调用 Hooks——你自己的自定义 Hooks。我们稍后会了解它们。）

所以你的情况应该是：

import React, { useState, useLayoutEffect } from 'react';
import './App.css';


const App = () => {
    const [style, setStyle] = useState(null)


    function useMediaQuery() {
        const [screenSize, setScreenSize] = useState([0]);
        
        useLayoutEffect(() => {
          function updateScreenSize() {
            setScreenSize([window.innerWidth]);
          }
          window.addEventListener("resize", updateScreenSize);
          updateScreenSize();
          return () => window.removeEventListener("resize", updateScreenSize);
        }, []);
        
        return screenSize;
      }
      
      const mediaQuery = useMediaQuery();

      const applyStyle = () => {
          if(mediaQuery === 320) {
              setStyle({
                  marginBottom: '150px'
              })
          }
      }

return (
        <div className='container'>
            <div className='row'>
                <div className='col-12'>
                    <div className='first'>
                        <button onClick={applyStyle} style={style}  className='btn btn-primary'>Click here</button>
                        <span className='closeWindow'><i className="far fa-window-close"></i></span>
                    </div>
                    <div className='second'>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default App

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。