Vue 3 composition API รับค่าจาก object ref

Question

ฉันมีref:

const editItem = ref<object | null>(null)

นี่คือค่าตัวอย่างสำหรับมัน:

{
   id: 1,
   title: 'Harry Potter',
   author: 'J.K. Rowling',
   created: '30-08-2000',
}

ถ้าฉันวิ่งconsole.log(editItem.value)ฉันจะเห็นวัตถุนี้:

แต่เมื่อฉันพยายามอ่านค่าauthorด้วยconsole.log(editItem.value.author)ฉันก็เห็นข้อผิดพลาดนี้:

Object is possibly 'null'.

Answer 1

ตั้งแต่ประเภทของโทษคือobject | nullมันอาจจะเป็นnullเมื่อคุณเข้าถึงได้นำไปสู่การยกเว้นรันไทม์ editItem.valueข้อผิดพลาดที่มีคำเตือนเกี่ยวกับความเป็นไปได้ว่า

คุณสามารถเพิ่มnull-check รอบ ๆ การเข้าถึง:

if (editItem.value) {
  console.log(editItem.value.author)
}

... หรือคุณสามารถใช้โซ่เสริมก็ได้ :

console.log(editItem.value?.author)

แต่คุณจะพบว่าคุณจะได้รับการแจ้งเตือนที่แตกต่างกันเกี่ยวกับการไม่ได้เป็นส่วนหนึ่งของลายเซ็นสำหรับauthor objectวิธีแก้ไขอย่างหนึ่งคือการเปลี่ยนrefประเภทจากobjectเป็นอินเทอร์เฟซเฉพาะ:

interface MyRef {
  id: number;
  title: string;
  author: string;
  created: string;
}

const editItem = ref<MyRef | null>(null)

console.log(editItem.value?.author) ✅

Answer 2

Cześć Michal

ปัญหา (โดยไม่เห็นรหัส) ดูเหมือนว่าคุณกำลังใช้การอ้างอิงสำหรับค่าวัตถุ ในขณะที่คุณอาจพบวิธีแก้ปัญหาบางอย่างที่จะได้รับมันไปทำงานวิธีที่ง่ายที่สุดในการจัดการกับวัตถุปฏิกิริยาคือการใช้แทนreactiveref

ประโยชน์เพิ่มเติมอย่างหนึ่งคือคุณไม่จำเป็นต้องใช้.valueเมื่อคุณได้รับหรือตั้งค่าวัตถุ