Recibo este error al activar un estado setState dentro de un enlace React personalizado. No estoy seguro de cómo solucionarlo, ¿alguien puede mostrarme lo que estoy haciendo mal? Recibe el error cuando toca la línea handleSetReportState(). ¿Cómo debo configurar el estado del informe desde el interior del gancho?
gancho de encuesta de intervalo de uso personalizado
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]) }reaccionar 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) } ... restEsto se debe a que coloca usePoll en la condición if, consulte https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
Puede poner la condición en la devolución de llamada
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) Y si el retraso afectará a report.status , use ref para almacenar report.status y lea el valor de referencia en la devolución de llamada.