javascript - 我的 chartJS axios.get 被触发了两次,导致图表也渲染了两次,我不知道为什么。我正在使用 react-chartjs-2
问题描述
我遇到了一个问题,我的 api 调用被触发两次而不是一次,因此它也渲染了 2 个图表。为什么?
export default class Graph extends Component {
constructor(props) {
super(props);
this.state: {
humidity_data
}
axios_humidity_data = () => {
return new Promise((resolve, reject) => {
try {
axios
.get(
`url'`
)
.then(response => {
const data = response.data.results[0].series[0].values;
let date = [];
let humidity = [];
data.forEach(chart_item => {
date.push(chart_item[0]);
humidity.push(chart_item[1]);
});
this.setState({
humidity_data: {
labels: date,
datasets: [
{
label: "Humidity %",
data: humidity,
}
]
}
});
console.log(data);
resolve(data);
});
} catch (err) {
reject(err);
}
});
};
componentDidMount() {
this.axios_humidity_data();
}
render() {
return (
<div>
<Line
data={this.state.pressure_data}
options={{
title: {
display: true,
text: "Pressure kPa",
},
}}
/>
</div>
);
}
}
我预计只会触发一个调用并呈现一个图表,但它会触发两次并呈现 2 个图表。
解决方案
使用这种方法:
export default class Graph extends Component {
constructor(props) {
super(props);
this.state: {
humidity_data
}
var s = true;
if (s) {
axios_humidity_data = () => {
return new Promise((resolve, reject) => {
try {
axios
.get(
`url'`
)
.then(response => {
const data = response.data.results[0].series[0].values;
let date = [];
let humidity = [];
data.forEach(chart_item => {
date.push(chart_item[0]);
humidity.push(chart_item[1]);
});
this.setState({
humidity_data: {
labels: date,
datasets: [
{
label: "Humidity %",
data: humidity,
}
]
}
});
console.log(data);
resolve(data);
});
} catch (err) {
reject(err);
}
});
};
}
s = false;
componentDidMount() {
this.axios_humidity_data();
}
render() {
return (
<div>
<Line
data={this.state.pressure_data}
options={{
title: {
display: true,
text: "Pressure kPa",
},
}}
/>
</div>
);
}
}
推荐阅读
- android - 从 PendingIntent singleTop 启动 Activity 不起作用
- elasticsearch - 使用保障和 openshift 设置 Kibana 多租户?
- r - 在 df 中创建选定列的组合
- c# - OpenCurrentDatabase 生成 System.AccessViolationException
- kubernetes - Kubernetes configmap 崩溃 pod
- r - 如何在R中的数字之间插入虚线
- reactjs - 从数组数据reactjs有条件地渲染页面
- python - 文本变量更改时标签不更新(Tkinter)
- angular-material - 如何在将现有组件留在前台的同时使用 CDK 覆盖?
- c# - 改进 LINQ to EF 生成的 SQL 查询