第
聊聊ant?design?charts?获取后端接口数据展示问题
今天在做项目的时候遇到几个让我很头疼的问题，一个是通过后端接口成功访问并又返回数据，但拿不到数据值。其二是直接修改state中的data，console中数组发生变化但任然数据未显示。
importReact,{useState,useEffect}fromreact;
import{Line}from@ant-design/plots;
import{PageContainer}from@ant-design/pro-layout;
importProForm,{ProFormDateRangePicker}from@ant-design/pro-form;
importqueryStringfromqs;
constDemoLine=()={
const[data,setData]=useState([]);
useEffect(()={
asyncFetch();
},[]);
varobj=[]
varpre=[]
constasyncFetch=()={
fetch(/api/v1.0/inquireRepairsAnalysisNumberListTenant.json,{
method:POST,
body:newURLSearchParams(queryString.stringify({
sessionUuid:window.localStorage.getItem(sid),
startDate:2025-12-01,
endDate:2025-05-30,
},{indices:false}))
.then(response=response.json())//将respose转成json格式数据以便可以访问读取
.then(response={
obj=response.datas[0];//获取json数据中的data部分，并对其开始进行处理
console.log(obj)
for(vari=0;iobj.typeNameList.length;i++){
for(varj=0;jobj.monthList.length-1;j++){
pre.push({monthList:obj.monthList[j],
monthNumberList:obj.monthNumberList[j].numberList[i],
typeNameList:obj.typeNameList[i],
setData(pre)
.catch((error)={
console.log(fetchdatafailed,error);
console.log(data,data.length)
constconfig={
data,
xField:monthList,
yField:monthNumberList,
seriesField:typeNameList,
yAxis:{
legend:{
position:top,
smooth:true,
//@TODO后续会换一种动画方式
animation:{
appear:{
animation:path-in,
duration:5000,
return(
PageContainer
ProForm
initialValues={{
dateRange:[Date.now(),Date.now()-1000*60*60*24],
ProForm.Grouptitle=日期区间选择
ProFormDateRangePickername=dateRange/
/ProForm.Group
/ProForm
Line{...config}/
/PageContainer
exportdefaultDemoLine;
通过接口获取到数据后，一直为response形式，处理很久，最后通过.then(response=response.json())//将respose转成json格式，但我们任然取不到PromiseResult中的内容，需要再次通过then方法
此时数据为json格式，为了取到json中的datas还需再obj=response.datas[0];//获取json数据中的data部分，并对其开始进行处理
.then(response={
obj=response.datas[0];