未捕獲的錯誤：無效的掛鈎調用。 鈎子只能在 function 組件的主體內部調用。 在 React 我得到這個錯誤

Question

在這里，我試圖將篩選 function 放在 TagCloud Object 的半徑處。 篩選 function 根據屏幕寬度返回不同的數字。 但我得到了那個錯誤。 任何解決方案都是最受歡迎的。 :)

 import { useEffect, useRef } from "react"; import "../Skills/Skills.css"; import useWindowSize from "./Screen"; const Skills = () => { const shoudLog = useRef(true); useEffect(() => { if (shoudLog.current) { shoudLog.current = false; const myTags = [ "JavaScript", "CSS", ]; const TagCloud = require("TagCloud"); const container = ".content"; TagCloud(container, myTags, { radius: Screening(), maxSpeed: "normal", }); } }, []); const Screening = () => { const windowSize = useWindowSize(); if (windowSize.width > 1240) { return 250; } else if (windowSize.width < 1240 && windowSize.width > 1000) { return 200; } else if (windowSize.width < 1000 && windowSize.width > 900) { return 180; } else if (windowSize.width < 900 && windowSize.width > 750) { return 150; } else if (windowSize.width < 750 && windowSize.width > 600) { return 130; } else if (windowSize.width < 600) { return 200; } }; return ( <div className="skillsset" id="skills"> <h1 className="skills-title">Skills</h1> </div> ); }; export default Skills;

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

使用hooks 的規則，你不能在 render 方法之外使用 hooks，或者有條件地使用它們。

在這部分：

const Screening = () => {
  const windowSize = useWindowSize();
  // ...
}

您在嵌套的 function 中使用了一個鈎子，這是一個禁忌。 你可能想做這樣的事情：

// put the hook *directly* in the render method
const windowSize = useWindowSize();

const Screening = () => {
  // ...
}