Puedo obtener los datos, pero no estoy seguro de cómo mapear los datos de los elementos anidados.
{"id":3, "brands":[{"id":6,"products":[], "title":"Lenovo", "image":"/img.png", "timestamp":"2022-02-07T15:11:36.059719+05:30", "updated":"2022-02-07T15:11:36.059719+05:30", "category":3}], "title":"Laptop", "image":"/img.png", "timestamp":"2022-01-30T23:18:14.124583+05:30", "updated":"2022-01-30T23:18:14.124583+05:30"}Estoy usando el siguiente método para hacer esto.
const CategoriesToBrands = ({ match }) => { const [hasError, setErrors] = useState(false); const [items, setItems] = useState({}); const { id } = useParams(); async function fetchData() { const data = await fetch("/api/v1/categories/nested/" + id); data.json() .then(data => setItems(data)) .catch(data => setErrors(data)); } useEffect(() => { fetchData() }, []) return ( <div> <div>{JSON.stringify(items)}</div> <hr /> {items.title} <hr /> <div>Has error: {JSON.stringify(hasError)}</div> </div> ); }; export default CategoriesToBrands;También probé varios métodos sugeridos en el desbordamiento de la pila para mapear los elementos, pero nadie parece estar funcionando. o están usando otro método. puede haber una cantidad múltiple de elementos en las marcas [] y quiero mostrar cada uno de ellos porque ahora hay uno. Entonces, ¿cuál sería la sintaxis o el método para mapearlos correctamente?
Tiene una matriz de brands dentro de su objeto principal obtenido por solicitud asíncrona. Significa que debe obtener marcas por items.brands . Algo como eso:
const CategoriesToBrands = ({ match }) => { const [hasError, setErrors] = useState(false); const [items, setItems] = useState({}); const { id } = useParams(); async function fetchData() { const data = await fetch("/api/v1/categories/nested/" + id); data.json() .then(data => setItems(data)) .catch(data => setErrors(data)); } useEffect(() => { fetchData() }, []) return ( <div> <div>{JSON.stringify(items)}</div> <hr /> {items.title} <hr /> {items.brands ? items.brands.map(brand => ( <div key={brand.id}>brand id: {brand.id}</div> )) : null} <div>Has error: {JSON.stringify(hasError)}</div> </div> ); }; export default CategoriesToBrands; La buena idea también es cambiar el nombre de su const [items, setItems] = useState({}); . En su caso, está obteniendo un elemento , no varios (supongo que este hecho se debe a su variable de id ). Así que el nombre como item, setItem suena mejor.