渲染的钩子比预期的要少。这可能是由于意外提前退货声明造成的答案

【问题标题】：Rendered fewer hooks than expected. This may be caused by an accidental early return statement渲染的钩子比预期的要少。这可能是由于意外提前退货声明造成的
【发布时间】：2021-11-15 20:41:00
【问题描述】：

在自定义 React 钩子中触发 setState 时出现此错误。我不确定如何解决它，谁能告诉我我做错了什么。它在到达 handleSetReportState() 行时出现错误。我应该如何从钩子内部设置报告状态？

自定义 useinterval 轮询钩子

export function usePoll(callback: IntervalFunction, delay: number) {
const savedCallback = useRef<IntervalFunction | null>()

useEffect(() => {
    savedCallback.current = callback
}, [callback])

useEffect(() => {
    function tick() {
        if (savedCallback.current !== null) {
            savedCallback.current()
        }
    }
    const id = setInterval(tick, delay)
    return () => clearInterval(id)
}, [delay])
}

反应 FC

const BankLink: React.FC = ({ report: _report }) =>  {

const [report, setReport] = React.useState(_report)

if ([...Statues].includes(report.status)) {
    
    usePoll(async () => {
        const initialStatus = _report.status
        const { result } = await apiPost(`/links/search` });
        const currentReport = result.results.filter((item: { id: string; }) => item.id === _report.id)

        if (currentReport[0].status !== initialStatus) {
            handleSetReportState(currentReport[0])
            console.log('status changed')
        } else {
            console.log('status unchanged')
        }
    }, 5000)
}
... rest

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

这是因为您将usePoll 置于if 条件中，请参阅https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level

您可以将条件放入回调中

usePoll(async () => {
    if ([...Statues].includes(report.status)) {
        const initialStatus = _report.status
        const { result } = await apiPost(`/links/search` });
        const currentReport = result.results.filter((item: { id: string; }) => item.id === _report.id)

        if (currentReport[0].status !== initialStatus) {
            handleSetReportState(currentReport[0])
            console.log('status changed')
        } else {
            console.log('status unchanged')
        }
    }
}, 5000)

如果延迟会影响report.status，则使用ref存储report.status并在回调中读取ref值。

【讨论】：