Tengo algunos problemas con esta función .map diciendo que no es una función.
Lo que se supone que debe hacer es obtener los datos en función de la URL y luego insertarlos en un componente asignado.
Aquí está el componente en sí:
export default function Trainers() { const [data, setData] = useState({}); const { id } = useParams(); useEffect(() => { fetch(`http://localhost:4000/api/v1/trainers/${id}`) .then((response) => response.json()) .then((data) => setData(data)); console.log(data); // eslint-disable-next-line }, []); return ( <div> <Pos> <SmallHeadline> <Cap>Trainer</Cap> </SmallHeadline> </Pos> {data.data.map((course, key) => { return ( <TrainerCard key={key}> <TrainerImgCon style={{ backgroundImage: `url(${course.asset.url})` }} ></TrainerImgCon> <TrainerTxt>{course.trainerName}</TrainerTxt> </TrainerCard> ); })} </div> ); }La API de la que toma los datos se ve así: datos obtenidos
Agradezco cualquier idea sobre esto
El problema es que el estado inicial no tiene nada que sea mapeable.
const [data, setData] = useState({}); y en el renderizado inicial, espera que exista al menos un data.data
{data.data.map((course, key) => { return ( <TrainerCard key={key}> <TrainerImgCon style={{ backgroundImage: `url(${course.asset.url})` }} ></TrainerImgCon> <TrainerTxt>{course.trainerName}</TrainerTxt> </TrainerCard> ); })}Sugiero proporcionar un estado inicial válido
const [data, setData] = useState({ data: [] });O use Encadenamiento opcional o alguna otra verificación nula en el mapeo
{data.data?.map((course, key) => { return ( <TrainerCard key={key}> <TrainerImgCon style={{ backgroundImage: `url(${course.asset.url})` }} ></TrainerImgCon> <TrainerTxt>{course.trainerName}</TrainerTxt> </TrainerCard> ); })} Sin embargo, por lo que puedo decir de su valor de respuesta de ejemplo, tal vez no haya una propiedad data anidados, y también parece ser un objeto, no una matriz, por lo que es posible que no haya nada para mapear. El estado data del objeto vacío ( {} ) está bien.
const [data, setData] = useState({}); ... return ( <div> <Pos> <SmallHeadline> <Cap>Trainer</Cap> </SmallHeadline> </Pos> <TrainerCard key={key}> <TrainerImgCon style={{ backgroundImage: `url(${course.asset.url})` }} /> <TrainerTxt>{data.trainerName}</TrainerTxt> </TrainerCard> </div> );