reactjs - React js Unhandled Rejection (TypeError): t[l].data.map is not a function
问题描述
我尝试动态显示我的图表,但我在标题中提到了这个错误,如何将 axios 返回的值分配给系列数据,requete axiose 使用 Spring Boot 仅返回一个 JSON 格式的值,请帮我解决这个错误并动态显示石墨线,列这是我的代码
class ApexChart extends React.Component {
constructor(props) {
super(props);
this.state = {
series: [{
name: 'WON Sum Item_Tcv / Item_Tcv_Euro',
type: 'column',
data: 1
}, {
name: ' WON count RFP ID / SAM ID',
type: 'line',
data: 2
}],
options: {
chart: {
height: 350,
type: 'line',
},
stroke: {
width: [0, 4]
},
title: {
text: 'Traffic Sources'
},
dataLabels: {
enabled: true,
enabledOnSeries: [1]
},
labels: [''],
xaxis: {
type: 'text'
},
yaxis: [{
title: {
text: ' ATOS PFE EL MANDOUR AMINE',
},
}, {
opposite: true,
title: {
text: 'Social Media'
}
}]
},
};
}
async componentDidMount(){
this.state = {brand: []};
axios.get("http://localhost:8080/designe/grapheone")
.then(response => response.data)
.then((data) =>{
this.setState({brand : data})
})
}
async componentDidMount(){
this.state = {brandd: []};
axios.get("http://localhost:8080/designe/grapheoneone")
.then(response => response.data)
.then((data) =>{
this.setState({brandd : data})
}
)
this.setState = {
series: [{
name: 'WON Sum Item_Tcv / Item_Tcv_Euro',
type: 'column',
data: this.state.brand
}, {
name: ' WON count RFP ID / SAM ID',
type: 'line',
data: this.state.brandd
}]
}
}
解决方案
您可以拨打电话,然后使用数据设置await
您的状态:axios
componentDidMount
series
async componentDidMount() {
const response1 = await axios.get("http://localhost:8080/designe/grapheone")
const response2 = await axios.get("http://localhost:8080/designe/grapheoneone")
const brand = response1.data
const brandd = response2.data
this.setState({
series: [{
name: 'WON Sum Item_Tcv / Item_Tcv_Euro',
type: 'column',
data: brand
}, {
name: ' WON count RFP ID / SAM ID',
type: 'line',
data: brandd
}]
})
}
为了获得更好的性能,您可以使用并行axios.all
发送两个请求:axios
async componentDidMount() {
const responses = await axios.all([
axios.get("http://localhost:8080/designe/grapheone"),
axios.get("http://localhost:8080/designe/grapheoneone")
])
const brand = responses[0].data
const brandd = responses[1].data
this.setState({
series: [{
name: 'WON Sum Item_Tcv / Item_Tcv_Euro',
type: 'column',
data: brand
}, {
name: ' WON count RFP ID / SAM ID',
type: 'line',
data: brandd
}]
})
}
您还应该考虑使用 try/catch 处理错误。
推荐阅读
- email - 从 AWS-ECS 容器发送邮件失败,没有收到任何错误?
- c++ - 使用 dlopen 加载派生的多态类
- r - Dplyr 不断自动添加我的专栏之一
- json - 如何在 Leaflet 地图上以图形方式映射 JSON 数据?
- oracle - SQL Developer 中 Mac 上的“ORA-12154:TNS:could not resolve the connect identifier specified”
- go - 解组嵌套在 JSON 对象中的数组
- reactjs - ReactJS - 导航返回时重新渲染相同的组件
- sql - 通过在另一个表中查找相同的字段来更新字段
- c# - Debugger.Break 有副作用吗?
- sql - 当显示的信息已经在公式中时如何仅显示不同的记录