Как остановить сбой приложения React, если ключ не существует в объекте или массиве?

Question

Как проверить, существует ли ключ перед итерацией массива с .map?

    import React from 'react';
    ReactDOM.render(

        myObj={
          "meat": {"main": ["Chicken", "Beef", "Lamb", "Pork"]}
        }

        const Dinner () =>{
        const course = 'main';
           return(
              <div>
                  //course might result in a lookup that doesn't exist
                  {myObj.meat[course].map((n) => n + '')}
              </div>
       );
    }
    export default Dinner;
    );

Поскольку ключ (курс) является переменной, это может привести к поиску, который не существует например, myObj.meat ['sillyKey'], и это приводит к сбою приложения. Как мне остановить сбой приложения в этом случае?

Большое спасибо,

Kat ie

Answer 1

Вы можете реализовать защиту следующим образом:

{myObj.meat[course] && myObj.meat[course].map((n) => n + '')}