Реагирует на сопоставление массива объектов с отсутствующим ключом, вызывая сбой TypeError

Question

После сопоставления моего массива searchResults, который заполняется объектами (возвращаемыми посредством упругого поиска) моего объекта Drug, в мой компонент React, я столкнулся с проблемой при проверке на случай ошибочного результата с отсутствующим ключом в моем объекте.,Понятно, что приложение аварийно завершает работу с "TypeError: Cannot read property 'icdCodeNum' of undefined", что в моем случае связано с отсутствующим ключом «primaryIcdCode» в моем объекте Drug.Я прохожу различные условные блоки, чтобы проверить отсутствующие данные перед сопоставлением, но все мои решения заканчивают тем, что блокировали даже правильные результаты поиска от возврата.

Обычный ответ массива 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

Если вы не хотите отображать searchResults без свойства 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>

Answer 2

Если 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>