Как .join () в React, если массив не существует изначально

Question

У меня есть функциональный компонент реакции, который отображает информацию после запроса API. Первоначально отображаемый объект является пустым, поскольку запрос не был выполнен. В объекте есть массив, который выглядит так:

['US', 'USA', 'United States of America']

Когда я просто отображаю массив, после запроса API он отображает его как одну строку на странице без пробелов между примерами:

USUSAUnited States of America

Естественно, я хочу отформатировать его с помощью .join (','), чтобы отформатировать строку как США, США, Соединенные Штаты Америки, но после добавления .join (',') выдается ошибка:

TypeError: props.modalCountry.alt_spellings is undefined

Кажется, что .join () пытается запустить первый рендер до того, как появится объект modalCountry. Как заставить этот метод не запускаться, пока объект и массив на самом деле не существуют?

Answer 1

In React - Булевы, нулевые и неопределенные игнорируются , поэтому вы можете вернуть null или undefined, если массив не существует.Другой вариант заключается в предоставлении массива по умолчанию.

Вариант 1. Используйте оценку короткого замыкания , чтобы пропустить array.join(), если массив еще не существует:

const Component = ({ arr = [] }) => (
    <div>
        {arr && arr.join()}
    </div>
);

Опция 2 - Визуализация null, если нет массива:

const Component = ({ arr = [] }) => (
    <div>
        {arr ? arr.join() : null}
    </div>
);

Опция 3 - Предоставить массив по умолчанию в качестве значения:

const Component = ({ arr = [] }) => (
    <div>
        {arr.join()}
    </div>
);