无法在 React JS 中读取未定义的属性（读取 'includes'）

Question

这些是我的错误编码，propApptData.doctor 值是 Dr X|Dr Y。我想拆分propApptData.doctor值然后把它们放在resource，然后我重新加载网页去触发这个功能，页面什么都显示不了。

if (propApptData !== undefined && preDoctor !== true) {
      const doctors = propApptData.doctor.includes("|") ? propApptData.doctor.split("|"): propApptData.doctor;
      setDoctorDetailList([...doctorDetailList, { resource: doctors }]);
      setPreDoctor(true)
    }

在其他函数中如果值只是不包括|，只有1个医生姓名，如果使用下面的代码，该函数可以工作：

propDoctorName 值为 Dr.X

if (propDoctorName !== undefined && preDoctor !== true) {
      setDoctorDetailList([...doctorDetailList, { resource: propDoctorName }]);
      setPreDoctor(true)
    }

错误结果如下图：

希望有人能指导我如何解决这个问题。谢谢。

[Update - 1 ]

我刚才试过，医生列表不能拆分成如下图的数组：

if (propApptData !== undefined && preDoctor !== true) {
      const doctors = propApptData.doctor ? propApptData.doctor.split("|"): [propApptData.doctor];
      setDoctorDetailList([...doctorDetailList, { resource: doctors }]);
      setPreDoctor(true)
    }

[更新-2]

[更新-3]

Answer 1

propApptData.doctor is undefined 要解决你可以添加 ?像这样标记propApptData.doctor?.includes("|")

Answer 2

错误self-explanatory、propApptData.doctor未定义。要避免将来出现此类错误，您可以使用可选运算符或使用空运算符或逻辑 OR 运算符分配默认值。

// Optional operator
const doctors = propApptData.doctor?.includes("|") ? propApptData.doctor.split("|"): propApptData.doctor;

// Nullish Operator
const doctors = (propApptData.doctor ?? "" ).includes("|") ? propApptData.doctor?.split("|"): propApptData.doctor;

// Logical Or
const doctors = (propApptData.doctor || "" ).includes("|") ? propApptData.doctor?.split("|"): propApptData.doctor;

您可以从 here 阅读更多内容。

无法在 React JS 中读取未定义的属性（读取 'includes'）

Cannot read properties of undefined (reading 'includes') in React JS

reactjs