Usando la acción getContractsFromAPI, obtengo una lista de contratos que están en la API, luego, usando useState y renderContracts, los muestro en la página, pero esto inicia una llamada interminable a useEffect
const [contracts, setContracts] = useState({}); const contractsList = useAppSelector(({ contractsList }) => contractsList); useEffect(() => { dispatch(getContractsFromAPI()); setContracts(contractsList); }, [contractsList, dispatch]); return ( <div> <h2>Contracts:</h2> <ul className={styles.contractsList}>{renderContracts(contracts)}</ul> </div> );¿Cómo se puede resolver el problema? Traté de eliminar [contractsList, dispatch] de useEffect, pero luego el procesamiento inicial no ocurre cuando se abre la página
Ponga despacho(getContractsFromAPI()); en su propio efecto de uso
useEffect(() => { setContracts(contractsList); }, [contractsList, setContracts]); useEffect(() => { dispatch(getContractsFromAPI()); }, [dispatch, getContractsFromAPI]);estabas obteniendo un bucle infinito porque getContractsFromAPI aparentemente editó la lista de contratos. La solución fácil es tener getContractsFromAPI en un useEffect que no busca cambios en la lista de contratos.
ACTUALIZACIÓN para cualquiera que se tope con esta respuesta: el usuario cambió su pregunta, agregando más contexto entre el momento en que publicó su pregunta y el momento en que publiqué mi respuesta. Mi respuesta sigue siendo válida, pero para el caso de uso específico de @yourBadApple, la respuesta de AKX es más relevante
Si realmente no necesita una copia superficial de los contratos en el estado local de su componente, deshágase del estado local y utilícelos desde el selector.
function ContractsComponent() { const contracts = useAppSelector(({ contractsList }) => contractsList); // Get contracts from API on mount useEffect(() => { dispatch(getContractsFromAPI()); }, [dispatch]); if (!contracts) return <>Loading...</>; return ( <div> <h2>Contracts:</h2> <ul className={styles.contractsList}>{renderContracts(contracts)}</ul> </div> ); }