未定义的变量 - 虽然 api fetch |爱讯 |道具

Posted 2023-04-14

【中文标题】未定义的变量 - 虽然 api fetch |爱讯 |道具

【英文标题】：Undefined variable - While api fetch | Axios | Props

【发布时间】：2020-01-31 21:09:46

【问题描述】：

我的主要组件 - 主页

一个非常简单的组件，我将 fetch 变量传递给另一个组件。

<template>
      <Page actionBarHidden="true">
        <ComponentA :api="api.somevariable"></ComponentA>
      </Page>
    </template>

    <script>
    import axios from "axios";
    import ComponentA from "./ComponentA.vue";
    export default 
      data() 
        return 
          isLoading: false,
          result: []
        ;
      ,
       components: 
        ComponentA,
      ,
       created() 
        this.loadData();
      ,
       methods: 
           async loadData() 
              let self = this;

              console.log("fetch");

              self.isLoading = true;
              const  data  = await Endpoints.get();
              self.isLoading = false;
              self.api = data;
              console.log(data); // returns the data as intended
            
       
    </script>

组件A也很简单

<template>
  <Label :text="somevariable"></Label>
</template>
<script>
export default 
  data() 
    return 
      somevariable: 0
    ;
  ,
  props: 
    api: 
      type: Number,
      required: true
    
  ,
  mounted() 
     this.somevariable = this.api;
  
;
</script>

我得到的错误是 [Vue warn]: Invalid prop: type check failed for prop "api"。值为 NaN 的预期数字，在组件 A 中未定义，在对 console.logs 进行一些引用和重新引用后，它实际上获取了该值。我不确定为什么会这样，我的方法是错误的吗？这让我很沮丧，已经有几个小时想不通了。

【问题讨论】：

据我所知，在父组件中没有 api.somevariable 直到异步请求完成

我觉得它试图在实际获取变量之前获取它。也许，如果是这样，如何解决这个问题

也许让创建的异步，或者在你有数据之前不渲染组件A

还是不行

【参考方案1】：

api 没有在data 中为第一个组件定义，因此它不会是反应式的。这应该会在控制台中给您一条警告消息。

data () 
  return 
    api: null,
    isLoading: false,
    result: []
  ;

第二个问题是，当组件第一次渲染时，它还没有从服务器加载api。使用await 对此无济于事，渲染模板将在异步请求完成之前发生。

鉴于componentA 当前的编写方式，它无法处理api 在首次创建时丢失的情况。因此，您需要使用v-if 来推迟创建，直到该数据可用：

<ComponentA v-if="api" :api="api.somevariable"></ComponentA>

如果没有v-if 检查，它只会传递api 的初始值，在您的原始代码中是undefined。这就是导致问题中提到的警告的原因。

当您谈到“console.logs 的引用和重新引用”时，我会假设这些更改只是触发了热重新加载，这很容易导致组件使用新数据重新渲染。否则不会发生这种情况，因为 api 未包含在原始 data 中导致缺乏反应性。

【讨论】：

它实际上可以工作，永远不会考虑这一点，谢谢;)