未捕获错误:无效的钩子调用.钩子只能在函数组件的主体内部调用.在React中，我收到了这个错误

Question

这里我试图将屏蔽函数放在TagCloud对象的半径处。筛选功能根据屏幕宽度返回不同的数字。但我犯了那个错误。欢迎使用任何解决方案。：(

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

根据钩子的规则，不能在render方法之外使用钩子，也不能有条件地使用它们。

本部分：

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

您在嵌套函数中使用了一个钩子，这是一个no。你可能想做这样的事情：

// put the hook *directly* in the render method
const windowSize = useWindowSize();
const Screening = () => {
// ...
}