Estoy tratando de obtener datos del backend y luego renderizar un componente personalizado con accesorios como los datos obtenidos del backend. Aquí hay un fragmento:
import { useEffect } from 'react'; import axios from 'axios'; import Card from './Card'; export default function DesignList() { useEffect(() => { async function populate() { const response = await axios({ method: 'POST', baseURL: 'http://localhost:3001', url: '/recommend', headers: { 'Content-Type': 'application/json' }, }); response.data.forEach(recommendation => { document.getElementById('design-list').append(<Card title={recommendation.title} }); } populate(); }) return ( <div id='design-list' /> ) }También traté de usar React.createElement(<Card .../>), lo empujé en una matriz e intenté representarlo, pero obtuve el mismo resultado que se describe a continuación.
Esto da una salida en la pantalla pero no como un componente HTML. La salida para cada componente es [object Object]
¿Cómo represento los componentes dinámicamente después de obtener los datos de accesorios del backend?
Use state para mostrar recomendaciones, no dom append.
import { useEffect, useState } from "react"; import axios from "axios"; import Card from "./Card"; export default function DesignList() { const [recommendations, setRecommendations] = useState([]); useEffect(() => { async function populate() { const response = await axios({ method: "POST", baseURL: "http://localhost:3001", url: "/recommend", headers: { "Content-Type": "application/json" }, }); setRecommendations(response.data); } populate(); }); return ( <div id="design-list"> {recommendations.map((item) => ( <Card title={item.title} /> ))} </div> ); }