时间戳

首页 > 解决方案 > 我想将数据从 axios 传递到状态中的对象

python - 我想将数据从 axios 传递到状态中的对象

问题描述

我试过了，但没用，我不知道如何获取对象chartData中的数组标签以将数据传递给它

state = {
        chartData: {
            labels:[],
            datasets:[{
                    label:'items',
                    data:[]
            }]
        }

      }

      componentDidMount() {
        axios.get('http://127.0.0.1:8000/orders/chart/').then(result => {
          this.setState({
            labels:result.data.label,
            data:result.data.quantity
          });
          console.log(this.state.chartData)
        });

      }

和console.log()给了我一个空数组，这是结果

Object
labels: Array(0)
length: 0
__proto__: Array(0)
datasets: Array(1)
0: {label: "items", data: Array(0), _meta: {…}}
length: 1
__proto__: Array(0)
__proto__: Object

这是我的后端功能：

class chart(ListAPIView):
    serializer_class=chartserializer
    def get(self,*args,**kwrgs):
        names=[]
        quant=[]

        od=order_details.objects.order_by('product__name','quantity').distinct('product__name')

        for i in od :
           name=products.objects.get(name=i.product.name) 
           qty=list(order_details.objects.filter(product=i.product).aggregate(Sum('quantity')).values())[0]
           names.append(name.name)
           quant.append(qty)
        data={
            "label":names,
            "quantity":quant
        }    
        return Response(data)

结果是：

{
    "label": [
        "dress",
        "jacket"
    ],
    "quantity": [
        10,
        17
    ]
}

标签： pythondjangoreactjsaxios

解决方案

据我所见，我认为您在返回 json 时没有正确组织数据。他们应该被分组，order_detail这样你就可以从他们每个人那里得到意义，即我会从后端返回类似的东西。

[
    {
        "label": "dress",
        "quantity": 10
    },
    {
        "label": "jacket",
        "quantity": 17
    },
]

你的json是自我解释的。您有一个 order_details 数组，数组中的每个对象都是一个 order_detail，其中包含 alabel和 a quantity。

然后在前端，您只需迭代它们中的每一个。否则，您将不得不保留索引来引用它们中的每一个，因为您正在接收两个不直接相关的值数组。

推荐阅读