1

Me aparece que la map no es una función como vemos en la siguiente imagen

introducir la descripción de la imagen aquí

El código es el siguiente:

class ListProduct extends Component {

    render(){
        const {products}=this.props;
        console.log(products);
        return(
            <Table>
                <thead>
                    <tr>
                        <th>id</th>
                        <th>Nombre</th>
                    </tr>
                </thead>
                <tbody>
                    {

                        products.map(product=>(
                            <tr key={product.id_persona}>
                                <td>{product.Nombre}</td>     
                                <td>
                                    <Button color="info" size="sm">Edit</Button>
                                    <Button color="danger" size="sm">Delete</Button>
                                </td>
                            </tr>
                        ))

                    }
                </tbody>
            </Table>
        )
    }
}

Esto es el codigo donde obtengo los datos

export default class ProductBox extends Component{

    Url='http://localhost:3005/';
    state={
        products:[],
    }

    componentDidMount(){
        fetch(this.Url)
        .then(response=>response.json())
        .then(products=>this.setState({products}))
        .catch(e=>console.log(e));

    }

    render(){
        return(
            <div className="row">
                <div className="col-md-6">
                    <h2 className="font-smaller text-center">
                        Cadastro de Productos
                    </h2>
                    <FormProduct/>
                </div>
                <div className="col-md-6">
                    <h2 className="font-smaller text-center">
                        Lista de Productos
                    </h2>
                    <ListProduct products ={this.state.products}/>
                </div>

        </div>
        );
    }
}

lo que el console.log(products) me arroja es el siguiente imagen Esta es la imagen que me lanza navegador algo estoy haciendo mal?

la imagen como pueden observar me lanza datos vacio despues me lanza ya con datos de la base de datos

Alguien que sepa como puedo solucionar esto estoy siguiendo los pasos de este tutorial si quieren para mas informacion https://www.youtube.com/watch?v=lJsgUOj73zg

3
  • 1
    Parece ser que props.products no es un array, por lo que no tiene el método map el 2 mar. 2020 a las 14:22
  • Alguna sugerencia estoy haciendo como este proyecto youtube.com/watch?v=lJsgUOj73zg el 2 mar. 2020 a las 21:05
  • La sugerencia es que revises lo que trae products. Verifica con console.log su contenido. Si es que eventualmente viene null o undefined, haz la validación correspondiente dentro de tu componente ListProduct. el 2 mar. 2020 a las 21:52

1 respuesta 1

2

Ocurre porque products en algun momento no es un array por lo que cuando haces un map no está definido.

El problema viene cuando haces setState en la respuesta de fetch.

.then(products => this.setState({products}))

products no es el array de productos sino un objecto con la cable products, cuando haces setState el estado que tiene el commponente es

state = {
  products: {
    products: []
  }
}

Puedes solucionarlo deconstrullendo la respuesta en el then añadiendo dos llaves

.then(({ products }) => this.setState({ products }))

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.