reactjs - props.items (วัตถุ) อาจจะไม่ได้ถูกกำหนดหลังจากเงื่อนไขการคืนค่าเร็ว

ฉันได้เห็นคำถามที่คล้ายกันไม่กี่ข้อ แต่ไม่มีข้อไหนที่มีปัญหาเหมือนกัน

ฉันสับสนเกี่ยวกับวัตถุที่อาจไม่ได้ถูกกำหนดข้อผิดพลาดจาก TypeScript

interface Props {
  item?: SomeItem;
}

export const Element = (props: Props) => {
  if (props.item === undefined) {
    return null;
  }

  const offer = offers.find((offer) => offer.id === props.item.offer_id);

  return <div>{props.item.getPayoutPlaceholder()}</div>; 
};

ข้อผิดพลาดคือ

TS18048: 'props.item' อาจเป็น 'undefined'. const offer=offers.find((offer) => offer.id === this.item.offer_id);

มันจะแสดงเฉพาะในบรรทัด find เท่านั้น บรรทัดสุดท้าย (return) ไม่ประสบปัญหานี้

ถ้าฉันกำหนด props.item ให้กับค่าคงที่แล้วใช้งาน มันจะหยุดทำงาน

  const item = props.item;
  if (item === undefined) {
    return null;
  }

  const offer = offers.find((offer) => offer.id === item.offer_id);

ฉันเข้าใจว่ามันอาจเปลี่ยนแปลงหลังจาก if โดยโค้ดอะซิงโครนัสบางอย่าง แต่สิ่งที่ทำให้ฉันงงจริงๆ คือความจริงที่ว่ามันไม่แสดงข้อผิดพลาดเดียวกันในคำสั่ง return อะไรอาจเป็นสาเหตุของเรื่องนี้ได้บ้าง?

คำตอบ #1

สาเหตุนั้นเป็นเพราะ props.item.offer_id อยู่ใน callback และดังนั้น TS จึงไม่สามารถมั่นใจได้ว่า props.item ไม่ได้เปลี่ยนแปลงระหว่างเวลาที่คุณตรวจสอบมันกับเวลาที่ callback ถูกเรียก ตามที่คุณสังเกต คุณสามารถเลี่ยงปัญหานี้ได้โดยการกำหนดตัวแปรคงที่:

const item = props.item;

ควรสังเกตด้วยว่าการทำลายโครงสร้างก็ใช้ได้เช่นกัน:

export const Element = ({ item }: Props) => {

แต่สังเกตว่าการเปลี่ยน const เป็น let ทำให้ข้อผิดพลาดเดิมปรากฏขึ้นอีกครั้ง:

let item = props.item;

และนั่นก็เพราะตอนนี้ TS ไม่แน่ใจว่ามันยังไม่เปลี่ยนแปลง เหมือนเมื่อก่อน (เนื่องจาก let สามารถเปลี่ยนค่าและถูกกำหนดค่าใหม่ได้)

การใช้งานของ props.item.offer_id ทำงานในคำสั่ง return เพราะมันไม่ได้อยู่ในบริบทที่อาจมีการดำเนินการล่าช้า ตัวอย่างของสิ่งนี้ ในโค้ดต่อไปนี้ TS ฉลาดพอที่จะเห็นว่าฟังก์ชันนิพนธ์นี้จะถูกเรียกใช้ทันทีและดังนั้นมันต้องเป็นแบบซิงโครนัส:

// OK, even though it's in another function
(() => props.item.offer_id)();

ยังไงก็ตาม ไม่ว่าจะด้วยเหตุผลใดที่ TS ทำงานแบบนี้ที่นี่ ผมแนะนำให้คุณใช้การแตกโครงสร้างโดยตรงจากรายการพารามิเตอร์ มันสะอาด ใช้กันอย่างกว้างขวาง และแก้ปัญหานี้ได้ทันทีโดยไม่ต้องประกาศตัวแปรคงที่เพิ่ม