未捕获的错误：无效的挂钩调用。 钩子只能在 function 组件的主体内部调用。 在 React 我得到这个错误

Question

Here I am trying to put that screening function at the radius of the TagCloud Object. The screening function returns different number according to the screen width. But I am getting that error. Any Solution is most welcome. :)

 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

With the rules of hooks , you can't use hooks outside the render method, or use them conditionally.

In this part:

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

You are using a hook inside a nested function, which is a no-no. You might want to do something like this:

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

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