未捕获错误:呈现的钩子比预期的要少.这可能是由意外的早期返回语句引起的

Question

我把这个函数组件作为我项目的一部分。我还没有像react文档中所说的那样在循环、条件或嵌套函数中调用任何钩子。我还将钩子放在任何return语句之前，以便react可以到达它们中的每一个。然而，我得到了这个错误，它说未捕获错误：呈现的钩子比预期的要少。这可能是由意外的早期返回语句引起的。

知道问题出在哪里吗？

function ScrollRenderingCom(props) {
const { children, aproximateHeight = 200} = props;
const [isIntersecting, setIsIntersecting] = useState(false);
const fakeComponent = useRef(null);

const callback = useCallback((entries) => {
const [entry] = entries;
if (entry.isIntersecting) {
setIsIntersecting(true)
}
}, []);
useEffect(() => {
const options = {
root: null,
rootMargin: '0px',
threshold: 0,
}
const observer = new IntersectionObserver(callback, options);
observer.observe(fakeComponent.current);
return () => {
observer.disconnect();
}
}, [callback]);
return (
isIntersecting ? children 
: 
<div 
ref={fakeComponent}
className={children.type().props.className}
style={{ visibility: 'hidden',
minHeight: aproximateHeight + 'px' }}
>
</div>
)
}

这是对控制台进行反应打印的组件堆栈跟踪，该控制台指定了该组件中发生的错误

上述错误发生在ScrollRenderingCom组件中：

at ScrollRenderingCom (http://localhost:3000/static/js/bundle.js:3468:5)
at div
at PostSection1
at Home
at Routes (http://localhost:3000/static/js/bundle.js:229775:5)
at div
at Router (http://localhost:3000/static/js/bundle.js:229708:15)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:228517:5)
at App

更新：

从负反射中，我注意到我的示例代码不足以重现这个问题。因此，我为上面的组件提供了一个Child组件，这样它就可以单独运行和检查。这是子组件

function Child() {
const [successMessage, setSuccessMessage] = useState(false);
useEffect(() => {
if (successMessage) {
alert('this app works correctly')
}
return () => {setSuccessMessage(false)}
})
const handleOnClick = () => {
setSuccessMessage(true);
}
return(
<div className="child"
style={{width: '500px', 
height: '200px',
backgroundColor: 'green',
color: 'white'
}} 
>
<h1>this component should be rendered when
the empty blue div element completely 
enters the viewport
</h1>
<h3>if you see the above message click Yes</h3>
<button onClick={handleOnClick} >Yes</button>
</div>
)
}

这是您可以检查问题的最后一个现场演示

请让我知道我的问题中有任何进一步的缺陷，并在击落之前给我一个修复它们的机会

Answer 1

通过调用children.type，您创建了该组件，这将导致挂钩有条件地运行。

尝试更改：

children.type().props.className

至

children.props.className

无需在此处创建组件

https://codesandbox.io/s/demo-forked-egofes?file=/src/ScrollRenderingCom.js:816-825