Vue组合式API中无法通过props的ID匹配数据对象问题求助

我正在开发第一个Vue项目，用json-server模拟后端，之后打算学习Firebase。使用组合式API时，通过fetch获取数据后，尝试用props传递的id从数据数组中匹配对应对象，但结果该对象始终为undefined。尽管caregivers数组数据正常，props的id也已正确传递，caregiverById仍未获取到目标对象。改用选项式API实现相同逻辑却能正常工作，想了解组合式API下出现此问题的原因。

组合式API代码 #

export default {
  props: ['id'],
  setup(props) {
    const caregivers = ref([]);
    const caregiverById = ref(null);
    const error = ref('');

    onMounted(async () => {
      try {
        const response = await fetch('http://localhost:3000/caregivers');
        if (!response.ok) {
          throw new Error('No available data');
        }
        const data = await response.json();
        caregivers.value = data;                  
        console.log(caregivers.value);

        // 查找对应ID的caregiver
        caregiverById.value = caregivers.value.find((caregiver) => caregiver.id === props.id);
        console.log('caregiverById:');
        console.log(caregiverById.value);
      } catch (err) {
        error.value = err.message;
        console.log(error.value);
      }
    });

    return { caregivers, caregiverById, error };
  }
}

可正常运行的选项式API代码 #

export default {
  props: [ 'id' ],
  components: { EvaluationCard },
  data() {
    return {
      caregivers: [],
      caregiverById: [],
      error: '',
    }
  },
  mounted() {
    fetch('http://localhost:3000/caregivers')
      .then((res) => res.json())
      .then((data) => this.caregivers = data)
      .then(() => console.log(this.caregivers))
      .then(() => this.caregiverById = this.caregivers.find((caregiver) => caregiver.id = this.id))
      .then(() => console.log(this.caregiverById))
      .catch(err => console.log(err.message))
  }
}

问题原因解析 #

1. 选项式API存在隐性逻辑错误
   你提供的选项式API代码里，find方法的条件用了赋值操作caregiver.id = this.id，而不是相等比较===。这个操作会把遍历到的每个caregiver.id修改为this.id，并且因为赋值表达式返回的是赋值后的值（只要this.id不是假值，就会被判定为true），所以find会直接返回数组的第一个元素，看起来像是“匹配成功”，但实际上根本没有做正确的ID匹配。

2. 组合式API存在类型不匹配问题
   组合式API用了正确的严格相等===比较，但如果props.id的类型和后端返回的caregiver.id类型不一致（比如props传递的是字符串类型ID，而json-server返回的是数字类型ID），就会导致匹配失败，返回undefined。

修复方案 #

• 先修正选项式API的逻辑错误，把caregiver.id = this.id改成caregiver.id === this.id，你会发现选项式API也会出现同样的undefined问题，以此验证类型不匹配的猜测。
• 针对组合式API的问题，解决类型不匹配：
  • 统一类型，比如将props的id转为数字：

    caregiverById.value = caregivers.value.find((caregiver) => caregiver.id === Number(props.id));
    

  • 或者使用宽松相等==进行比较（不推荐，建议尽量保持类型一致）：

    caregiverById.value = caregivers.value.find((caregiver) => caregiver.id == props.id);
    

内容的提问来源于stack exchange，提问作者fonsor17