使用缺少键的对象映射反应数组导致 TypeError 崩溃

Question

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

正常的 searchResult 数组响应如下所示（所有必要的对象键都存在）：

[{"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”键时，问题就出现了（由于在数据库本身中输入的数据不正确，这是我发现问题的方式）。

我在我的 DrugSearch 组件中按如下方式映射我的数组：

<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 - 忽略 index.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 属性的情况下显示 searchResults，您可以过滤掉这些结果。

<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>