我有一个看起来像这样的组件（非常简化的版本）：
2
1035const component = (props: PropTypes) => {
const [allResultsVisible, setAllResultsVisible] = useState(false);
const renderResults = () => {
return (
More results v
{
allResultsVisible &&
...
}
);
};
return { renderResults() };
}
当我加载使用此组件的页面时，出现此错误：Uncaught Invariant Violation: Rendered more hooks than during the previous render. 我试图找到此错误的解释，但是我的搜索没有返回结果。
当我稍微修改组件时：
const component = (props: PropTypes) => {
const [allResultsVisible, setAllResultsVisible] = useState(false);
const handleToggle = () => {
setAllResultsVisible(!allResultsVisible);
}
const renderResults = () => {
return (
More results v
{
allResultsVisible &&
...
}
);
};
return { renderResults() };
}
我不再收到该错误。是因为我在 renderResults 返回的 jsx 中包含了 setState 函数吗？如果能够解释该修复为何有效，那就太好了。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
我也遇到了同样的问题。我正在做的事情是这样的：
const Table = (listings) => { const {isLoading} = useSelector(state => state.tableReducer); if(isLoading){ return <h1>Loading...</h1> } useEffect(() => { console.log("Run something") }, []) return (<table>{listings}</table>) }我认为发生的情况是在第一次渲染时，组件提前返回并且 useEffect 没有运行。当 isLoading 状态更改时，useEffect 运行，我收到错误 - 钩子渲染的次数比之前的渲染次数多。
一个简单的更改就解决了这个问题：
const Table = (listings) => { const {isLoading} = useSelector(state => state.tableReducer); useEffect(() => { console.log("Run something") }, []) if(isLoading){ return <h1>Loading...</h1> } return (<table>{listings}</table>) }