在Vue中使用箭头函数无法获取gata

Posted 2023-02-23

【中文标题】在Vue中使用箭头函数无法获取gata

【英文标题】：Can't get gata using arrow function in Vue

【发布时间】：2021-01-02 12:52:44

【问题描述】：

我是 Vue 的新手，我的问题是：我无法从 API 获取数据到我的组件。 我有一个从我的 api 获取数据的服务类。 Api 工作正常。所以代码：

import IReview from "../types/Review"
import axios from "axios"

export default class ReviewService
    API_URL=process.env.VUE_APP_API_URL;
 
    public async getAllReviews(id: number): Promise<IReview[]>
        const result=await axios.get(`$this.API_URL/film/$id/reviews`);
        console.log(result.data, "This is ok, i see my data in console")
        return result.data;
    

谁想知道，我使用 filmId 从 API 获取电影评论。

得到结果很好Img

所以我得到的组件：

<template>
    <div class="ComentsField">
        <div class="ListOfComments">
            <div v-if="this.getReviewsCount()>0">
                <review :review="review"
                 v-for="review in ReviewsList" 
                 v-bind:key="review.id" 
                 v-bind:FilmId="FilmId">
                        review.Review
                </review>
            </div>
        </div>
        <hr>
        <div class="AddNewComment">
            Add
        </div>
    </div>
</template>

<script lang="ts">
import ReviewService from '@/services/review-service.ts'
import IReview from '@/types/Review.d.ts'
import  Vue from 'vue';
import Component from 'vue-class-component';
import Review from '@/components/Review.vue'

const reviewService=new ReviewService();
@Component(
    props: ['FilmId'],
 name: 'Reviews',
 components: Review
)
export default class Reviews extends Vue
    ReviewsList: IReview[]=[];
    getReviewsCount()
        return this.ReviewsList.length;
    
    getAllReviews()
        console.log(this.ReviewsList.length, "**IT gets me zero**")
        reviewService.getAllReviews(this.$props['FilmId']).then(data=>this.ReviewsList=data).catch(err=>console.error(err));
        console.log(this.ReviewsList, "1111111111s")//undef  BUT WHY i import data
        console.log(this.ReviewsList.length, "222222")//0 again
    
    created()
    
        this.getAllReviews();
    

</script>

<style lang="scss">

</style>

审查

export default interface IReview

    id:number,
    createdOn: Date,
    updatedOn:Date,
    Review: string,
    ReviewAuthor: string,

在控制台日志中我评论发生了什么。

当然，我将它推送到 github，你可以在这里找到（BackEnd .NET 5）。

GitHub

我不知道为什么会这样，并且很乐意提供任何帮助。

【问题讨论】：

将这两个console.log 移动到getAllReviews.then() 的回调中。例如：reviewService.getAllReviews(...).then((data) => console.log(this.ReviewsList))

我不熟悉 TS，但除非我遗漏了与此相关的内容，否则您不应该直接修改 ReviewList 的值，而是通过突变和/的方式访问它或动作调度。

【参考方案1】：

您可以在文档中找到更多示例：

https://developer.mozilla.org/ru/docs/Web/javascript/Reference/Statements/async_function

对于 axios 来说： https://github.com/axios/axios#example

【讨论】：

嗨，我的 props 有错误，axios 工作正常，谢谢

【参考方案2】：

我解决了 谁想知道我修复了我的复习课

  props: ["review", "FilmId"],

并在我的评论 v-for 中进行一些修复

<div class="ListOfComments">
  <div v-if="this.getReviewsCount()>0">
    <div v-for="review in ReviewsList" v-bind:key="review.id">
      Вошли в цикл
      <review :review="review" :FilmId="FilmId">
        Пытаемся писать ревью
        review.Review
      </review>
    </div>
  </div>
</div>

【参考方案3】：

快速回答：您的 console.log 在 http 承诺实际解决之前执行。所以你打印出你的变量，但你还没有结果。

解决方案：将您的 console.log 移至 .then() 块中，或使用与您在服务中相同的方式使用 async/await。

其他改进：将您的 getReviewsCount 转换为 computed。

【讨论】：

好的，我明天试试，然后回答

再次嗨，它没有帮助。我再次在我的 Review 组件中得到 undef

我想自从您批准我的回答后它就起作用了？此外，您应该将 then 语句包装到括号中，如下所示：.then(data=>(this.ReviewsList=data))