На самом деле, это просто потому, что ваши макросы загружаются асинхронно, поэтому вы должны добавить тест, чтобы проверить, загружен ли он.
Вы можете попробовать это:
const {macros} = recipe;
if (macros && macros.length) {
macros.map((i) => {
....
}...
}
Или, если вы уже используете метод Render, вы можете просто попробовать это:
const {macros} = recipe;
return (
{
macros && macros.length && /* It will check if macros has elements inside */
macros.map((i) => {
....
}...
}
}
)