我正在从我的 nodejs 获取动态数据到 reactjs 但我收到一条错误消息 "POST IS NOT DEFINED"
I'm fetching dynamic data from my nodejs to reactjs but I get an error saying "POST IS NOT DEFINED"
我已经使用节点在我的 mongodb 数据库中创建了条目,现在我正在尝试从后端获取该数据以对前端做出反应,用于节点中跨平台的第 3 方应用程序是 cors 和react 是 axios(在脚本中我添加了“proxy”:“http://localhost:5000”(5000 是我的后端端口)
这是我的 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;
我收到错误提示 ***
src\components\home\Latest\NovelCard.js Line 45:24: 'post' is not
defined no-undef
您的 post
变量在您所在的州可用。您需要在 render
函数中执行类似的操作。
render() {
console.log('state', this.state);
return <Container>{this.state.post.map(createSet)}</Container>;
}
或者你也可以这样做。
render() {
const { post } = this.state;
console.log('state', this.state);
return <Container>{post.map(createSet)}</Container>;
}
我已经使用节点在我的 mongodb 数据库中创建了条目,现在我正在尝试从后端获取该数据以对前端做出反应,用于节点中跨平台的第 3 方应用程序是 cors 和react 是 axios(在脚本中我添加了“proxy”:“http://localhost:5000”(5000 是我的后端端口)
这是我的 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;
我收到错误提示 ***
src\components\home\Latest\NovelCard.js Line 45:24: 'post' is not defined no-undef
您的 post
变量在您所在的州可用。您需要在 render
函数中执行类似的操作。
render() {
console.log('state', this.state);
return <Container>{this.state.post.map(createSet)}</Container>;
}
或者你也可以这样做。
render() {
const { post } = this.state;
console.log('state', this.state);
return <Container>{post.map(createSet)}</Container>;
}