Solucionado (ver solución)
Solucionado
(ver solución)
3
respuestas

[Duda] Problemas de compilación

Buenos días, siguiendo las indicaciones del instructor me he encontrado con dos problemas que no he logrado solucionar,

  1. Tengo un error de compilación en el cual me indica react que: "Alura-ONE\React\react-router\src\api\api.js: Invalid shorthand property initializer. (5:12)"
  2. Dentro del código que se entrega en el min 5:08 aparece un "posts.map", pero en mi editor aparece "posts" como no definido y no logro explicarme porque o si tendrá relación con el primer fallo.

comparto mis códigos:

import axios from "axios" 
// Esta libreria se usa para manejar las peticiones http

export const api = axios.create({
    baseURL = "http://localhost:5000"
})

export const buscar = async (url, setData) => {
    const respuesta = await api.get(url)
    console.log(respuesta)
    setData(respuesta.data)
}

Compiled with problems:
×
ERROR in ./src/api/api.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\USER.C408LA\OneDrive\Documentos\JOB\Cursos\Alura-ONE\React\react-router\src\api\api.js: Invalid shorthand property initializer. (5:12)

  3 |
  4 | export const api = axios.create({
> 5 |     baseURL = "http://localhost:5000"
    |             ^
  6 | })
  7 |
  8 | export const buscar = async (url, setData) => {

segundo código:

import { useState, useEffect} from 'react'
import "../assets/css/componentes/card.css"
import { buscar } from "../api/api"
import { Link } from "react-router-dom"

const ListPosts = ({ url }) => {

    const [post, setPost] = useState([])

    useEffect(() => {
        buscar(url, setPost)
    },[url])

    return (
        <section className="posts container">
            {
                posts.map(post => {
                const { id, title, metadescription, categoria } = post;
                    return <Link to={`/posts/${id}`} className={`post__card post-card--${categoria}`} key={id}>
                            <article >
                                <h3 className="post-card__title">
                                    {title}
                                </h3>
                                <p className="post-card__meta">{metadescription}</p>
                            </article>
                        </Link>
                })
            }
        </section>
    )
}

export default ListPosts

agradezco su colaboración

3 respuestas

Problemas resueltos,

en el primer caso tenia mal escrito el baseURL, yo lo tenia baseURL = "http://localhost:5000", pero en realidad se debe escribir con dos puntos en vez de un igual, asi baseURL: "http://localhost:5000"

El segundo error cuando declare el useEstate no le agregue la "s" al post... de ahi se venia generando que no reconociera el arregle en el posts.map

solución!

Hola en esta parte al codigo le fataron las "s"

const [post, setPost] = useState([])

    useEffect(() => {
        buscar(url, setPosts)
    },[url])

debería ser:

const [posts, setPosts] = useState([])

    useEffect(() => {
        buscar(url, setPosts)
    },[url])

Prueba y comenta. Saludos

Perdon, ahi vi que ya lo habias solucionado.

Saludos