Estoy obteniendo datos de una API usando axios. En la página de detalles de mi factura cuando intento obtener datos de una sola factura usando este código
const id = props.match.params.id; const invoice = useSelector((state) => state.invoices.find(invoice => invoice._id === id));Devuelve un objeto o indefinido, pero solo quiero un objeto dentro de una matriz o una matriz vacía no indefinida, ¿cómo debo hacer eso? Cuando traté de usar el método .filter en lugar de .find, registró la matriz en la consola un tiempo infinito.
Código completo:
import React, { useEffect, useState } from 'react' import { Link } from 'react-router-dom' import backIcon from '../assets/images/icon-arrow-left.svg' import InvoiceDetailsHeader from './InvoiceDetailsHeader'; import { useSelector } from 'react-redux'; // remove this after adding DB import data from '../data.json' import InvoiceCardDetails from './InvoiceCardDetails'; const InvoiceDetails = (props) => { const [invoiceData, setInvoiceData] = useState([]); const id = props.match.params.id; const invoice = useSelector((state) => state.invoices.find(invoice => invoice._id === id)); useEffect(() => { setInvoiceData(invoice); // console.log(invoiceData) }, [id, invoice]); return ( <div className="mx-auto px-12 py-16 w-full max-w-3xl"> <Link to="/" className="text-neutral text-xs"><img className="inline -mt-1 mr-4" src={backIcon} alt="back" /> Go back</Link> <InvoiceDetailsHeader data={invoiceData} /> <InvoiceCardDetails data={invoiceData} /> </div> ) } export default InvoiceDetailsAlguien por favor me ayude con esto.
useEffect(() => { if(invoice){ setInvoiceData([...invoiceData, invoice]) } }, [id, invoice]);En primer lugar, no sé si me perdí algo, pero no creo que sea una buena manera de que la factura sea posible tanto para los objetos como para la matriz vacía. Creo que una mejor manera es dividir las condiciones y presentar la factura cuando no se encuentra la identificación.
Si se usa un método de filtro en lugar de una búsqueda, el método de filtro devuelve una nueva instancia de matriz cada vez. Entonces, a medida que cambia el segundo argumento (factura) de use Effect, la devolución de llamada de actualización de use Effect continuará repitiéndose.
const invoice = useSelector((state) => state.invoices.find(invoice => invoice._id === id) ?? []); Lo que desea se puede hacer simplemente usando el operador coalescente nulo . Sin embargo, [] también crea una nueva instancia de matriz, por lo que la devolución de llamada de actualización se repite indefinidamente.
Entonces, para hacer que lo que desea funcione en el código actual, elimine la invoice de la dependencia de useEffect como se muestra a continuación.
useEffect(() => { setInvoiceData(invoice); // console.log(invoiceData) }, [id]);Creo que es porque está configurando setInvoiceData (factura) que no está definido desde el principio. así que haz una revisión
if(invoice){ setInvoiceData([invoice]) }Por favor, pruebe este