响应对象数组映射与缺少键导致类型错误崩溃

Question

将填充了我的药物对象的对象(通过弹性搜索返回(的 searchResults 数组映射到我的 React 组件时，我在测试错误结果的情况下遇到了一个问题，我的对象中缺少键。该应用程序可以理解地崩溃，"TypeError: Cannot read property 'icdCodeNum' of undefined"在我的情况下，这是由于我的药物对象中缺少"primaryIcdCode"键。我正在通过各种条件块在映射之前检查丢失的数据，但我的所有解决方案最终都会阻止返回正确的搜索结果。

正常的搜索结果数组响应如下所示(其中存在所有必需的对象键(：

[{"otherIcdCodes":[{"otherIcdCodes":[],"_id":"5bc8393936ca7a5008025a78","brandName":"Advil","genericName":"Ibupr
ofen","primaryIcdCode":{"_id":"5bc838e036ca7a5008025a75","icdCodeNum":"R52","icdCodeValue":"Pain, unspecified"},"dru
gNotes":"Don't take on empty stomach","drugClass":"Pain management","drugSchedule":"0","extraDrugInfo":"","date":"20
18-10-18T07:41:45.183Z","__v":0}]

当我的搜索结果对象从我的一个搜索响应中缺少"primaryIcdCode"键时，问题就出现了(由于数据库本身输入的数据不正确，这是我发现问题的方式(。

我正在我的药物搜索组件中映射我的数组，如下所示：

<div>
<ListGroup>
{searchResults.map(
({
_id,
brandName,
genericName,
drugNotes,
primaryIcdCode,
otherIcdCodes
}) => (
<Card key={_id} body>
<h4>
<Button disabled className="drug-search-name">
{brandName} | {genericName}
</Button>
</h4>
<div>
<Button className="btn-lg-icd">
{primaryIcdCode.icdCodeNum}
</Button>      
</Card>
)
)}
</ListGroup>
</div>

在映射之前捕获丢失数据的正确方法是什么？我尝试过滤，但我无法使用我的 DrugSearch 组件的逻辑正确配置它，所以我的搜索结果甚至不会返回。

以下是完整组件的链接(检查DrugSearch.js - 忽略索引.js(，以使问题更有意义：

https://codesandbox.io/s/m3p1k31p0j

提前感谢！

Answer 1

如果primaryIcdCode代码名是可选属性，则必须确保在没有条件检查的情况下不会访问此对象中的任何内部属性

<div>
<ListGroup>
{searchResults.map(
({
_id,
brandName,
genericName,
drugNotes,
primaryIcdCode,
otherIcdCodes
}) => (
<Card key={_id} body>
<h4>
<Button disabled className="drug-search-name">
{brandName} | {genericName}
</Button>
</h4>
<div>
{primaryIcdCode && <Button className="btn-lg-icd">
{ primaryIcdCode.icdCodeNum}
</Button>  }    
</Card>
)
)}
</ListGroup>
</div>

Answer 2

如果不想在没有primaryIcdCode属性的情况下显示搜索结果，可以筛选出这些结果。

<div>
<ListGroup>
{searchResults.filter((item) => !!item.primaryIcdCode).map(
({
_id,
brandName,
genericName,
drugNotes,
primaryIcdCode,
otherIcdCodes
}) => (
<Card key={_id} body>
<h4>
<Button disabled className="drug-search-name">
{brandName} | {genericName}
</Button>
</h4>
<div>
<Button className="btn-lg-icd">
{primaryIcdCode.icdCodeNum}
</Button>
</div>
</Card>
)
)}
</ListGroup>
</div>