Hice entradas en mi base de datos mongodb usando el nodo ahora estoy tratando de obtener esos datos del backend para reaccionar en el front-end la aplicación de terceros utilizada para multiplataforma en el nodo son cors y para reaccionar es axios (en el script que he agregado "proxy":"http://localhost:5000"(5000 es mi puerto backend)
Aquí está mi código para NovelCard.js
import React, { Component } from 'react'; import { Container } from 'react-bootstrap'; import Card from 'react-bootstrap/Card'; import axios from 'axios'; const createSet = (post) => { <Card style={{ width: '18rem' }}> <Card.Img variant="top" src="holder.js/100px180" /> <Card.Body> <Card.Title>{post.name}</Card.Title> <Card.Subtitle className="mb-2 text-muted">{post.author}</Card.Subtitle> <Card.Text>{post.synopsis}</Card.Text> </Card.Body> </Card>; }; class Latest extends Component { state = { name: '', author: '', synopsis: '', post: [], }; componentDidMount = () => { this.getData(); }; getData = () => { axios .get('http://localhost:5000/novels/') .then((res) => { const data = res.data; this.setState({ post: data }); console.log('data recived'); }) .catch(() => { alert('error'); }); }; render() { console.log('state', this.state); return <Container>{post.map(createSet)}</Container>; } } export default Latest;Recibo un error que dice ***
src\components\home\Latest\NovelCard.js Línea 45:24: 'post' no está definido no-undef
Su variable post está disponible dentro de su estado. Debe hacer algo como esto dentro de su función de render .
render() { console.log('state', this.state); return <Container>{this.state.post.map(createSet)}</Container>; }O puedes hacer así también.
render() { const { post } = this.state; console.log('state', this.state); return <Container>{post.map(createSet)}</Container>; }