子组件如何根据父组件传来的props值来从后台获取数据，然后再初始化子组件？

[haifenggo]

</template>
...
<img :src="refUrl">
...
</template>

<script setup>
const props = defineProps({
  id: {
    type: String,
  },
});
const refUrl = ref("ip");
async function getUrl() {
    let res = await Api.getUrl(props.id);
    refUrl.value = res.url;
}
getUrl();
</script>

以上代码执行的实际效果是img的src是ip,并不能根据父组件传来的id值来从后台获取新的url,
而且可能由于img的src的原始值ip向后台发送请求后报错, 如果点击一次刷新页面的话, 页面就会无限地自动刷新.
如果把getUrl();放到onUpdated中, 就不会无限自动刷新页面, 但是第一次也会发送img的src的原始值ip向后台发送请求后报错的情况.

新人小白刚学vue, 想问一下是什么原因导致上面的代码不能按预期执行,并且出现无限刷新页面的错误, 还有就是有其他的做法能实现根据父组件传来的props值来从后台获取数据，然后再初始化子组件吗?

[Terry2001]

这种场景一般是用 watch 监听 props.id，并且设置 immediate 为 true

watch(()=>props.id, (newValue, oldValue) => {

  getUrl();

}, 
{ immediate: true })

[haifenggo]

这种方法是可以, 但是会导致组件发送两次请求,
一次是在watch获得父组件传来的值之前(可能是组件创建时), 使用了原始的默认数据向后台发送了错误请求, 比如img就已经使用ip发送请求了,watch就已经使用props.id的默认值undefined发送请求了;
第二次是获得父组件传来的正确的值,然后发送所需要的正确请求.

有什么办法能消除第一次的错误请求 来 减少后台的请求数量和错误的参数请求吗?

[Shyam-Chen]

加 if:

watch(
  () => props.id,
  (val) => {
    if (val) getUrl();
  },
  { immediate: true },
);

[haifenggo]

在watch里面加if, 组件创建时img还会发送请求. 直接在img里加if好像就可以了.