Как дождаться выполнения AJAX, а потом использовать данные из него в React

Question

На странице необходимо использовать многоязычность. Все переводы получаем из json. Потом эти данные использую в рендере готового компонента. Переводы передаются в state. И уже из state'а использую необходимые данные. Но возникает нюанс: сначала state возвращает пустой массив, а потом заполненный. Использую данные из state'а, например, this.state.languages.english.title. Но так как массив пустой, реакт тут же кидает ошибку null этого элемента. Как можно дождаться получения данных, а потом уже рендерить готовый компонент?

Answer 1

Во-первых в методе render можно сделать что-то в духе:

render(){
    if(!this.state.languages.length){
        return null;
    }

Такая конструкция совершенно нормальна, это "не рисуй ничего, пока нет данных".
После того как Вы наполните свое состояние переводами метод render вызовется сам, проскочит это условие и отрисует уже нормальный компонент. При условии что Вы заполняете состояние корректно через setState конечно.

Однако на практике это не то чтобы очень удобно и на велозаезде к локализации вас ждут много маленьких нюансов.

Например если у вас в компоненте множество строк внутри не самой простой разметки, Вы хотите разметку отрисовать не дожидаясь загрузки перевода. В этом случае придется условие {this.state.languages.length ? 'моя строка' : null} писать для каждой

И еще вам понадобится кастомное форматирование строк.
А еще локализация - это даты. И даже форматы номеров. И формы множественного числа...

К чему это я, велосипеды это забавно, но повидав велосипедов, для боевого проекта я бы взял скажем react-intl.