Estoy tratando de ver un campo llamado partido. después de seleccionar esos campos, será necesario representar la lista de productos. Estoy usando el formulario de gancho de reacción donde usé el gancho de reloj para suscribirme al cambio.
<FormProvider {...methods}> <form onSubmit={handleSubmit(onSubmit)}> <Select ref={ref} options={partyOptions} value={partyOptions.find( (c) => c.value === value )} onChange={(val: any) => onChange(val.value)} name={name} /> )} <div className="card-body row"> <ProductContext.Provider value={[product, setProduct]}> <ProductList partyId={partyId} /> </ProductContext.Provider> </div> </form>En el componente de lista de productos, pasé partyId como accesorios e intenté acceder a la API de acuerdo con partyId
export function ProductList({ partyId }: { partyId: any }) { const { control } = useFormContext(); // retrieve all hook methods const [productOptions, setProductOptions] = useState([] as any); const productQuery = useQuery("products", () => searchProduct(partyId), { enabled: partyId !== undefined, }); if (productQuery.isFetched) { setProductOptions( productQuery.data.data.map((d: any) => ({ value: d.id, label: d.name, })) ); } Recibo Too many re-renders. React limits the number of renders to prevent an infinite loop. ¿Hay alguna solución para no renderizar varias veces?
Debe agregar más lógica, setProductOptions se llama en cada procesamiento de reacción. Por ejemplo, puede usar useEffect para llamar a setProductOptions solo una vez.
export function ProductList({ partyId }: { partyId: any }) { const { control } = useFormContext(); // retrieve all hook methods const [productOptions, setProductOptions] = useState([] as any); const productQuery = useQuery("products", () => searchProduct(partyId), { enabled: partyId !== undefined, }); useEffect(() => { if (productQuery.isFetched) { setProductOptions( productQuery.data.data.map((d: any) => ({ value: d.id, label: d.name, }) ) ); } }, [productQuery.isFetched, setProductOptions]);Tu problema está aquí:
if (productQuery.isFetched) { setProductOptions( productQuery.data.data.map((d: any) => ({ value: d.id, label: d.name, }) ) ); Cada vez que se procesa el componente, desencadena otra actualización de estado con setProductOptions , que luego provoca otro procesamiento y el ciclo se repite infinitamente. Considere usar un gancho useEffect en su lugar:
useEffect(() => { if (productQuery.isFetched) { setProductOptions( productQuery.data.data.map((d: any) => ({ value: d.id, label: d.name, }) ) } }, [productQuery.isFetched); Más información sobre useEffect está disponible aquí: https://reactjs.org/docs/hooks-effect.html