Слова из файла

Одна карточка — ещё не колода. Слова для колоды лежат в файле words.json, на последней вкладке редактора: двенадцать объектов, у каждого есть id, испанское слово в spanish и русское в russian. Первые два выглядят так:

[
    { "id": 1, "spanish": "el gato", "russian": "кот" },
    { "id": 2, "spanish": "el perro", "russian": "собака" },
    …
]

Вы загрузите их так же, как в уроке «Эффекты»: с помощью fetch() в эффекте с зависимостями [], чтобы он сработал один раз, после первого появления App. Пока слова не пришли, показывать нечего. Поэтому состояние words сначала равно null, и пока оно такое, App возвращает только сообщение, не доходя до карточки:

if (words === null) {
    return <p>Загрузка…</p>;
}

const card = words[0];

Ниже этой проверки слова уже есть, а card — первое из них. Его свойства передаются карточке как пропсы: <Flashcard word={card.spanish} translation={card.russian} />.

В уроке «Эффекты» отдельное состояние loading говорило, идут ли ещё данные. Здесь это говорит само words: пока слова не пришли, оно равно null, а потом это массив. Второе состояние не нужно.

А если файл не удалось загрузить? Тогда words останется null, и приложение будет вечно писать Загрузка…. Лучше сказать, что случилось: второе состояние, error, получает сообщение, а App его показывает. Проверяйте его раньше, чем words === null, потому что после неудачной загрузки верно и то и другое.

Типичные ошибки:

• Вызов useState или useEffect ниже if. React должен вызывать одни и те же хуки в одном и том же порядке при каждой отрисовке, а ранний return их пропустит. Хуки всегда стоят в начале компонента.
• Забытый [] в конце useEffect. Тогда эффект срабатывает после каждой отрисовки: загружает слова, setWords() запускает новую отрисовку, и эффект снова загружает их, и так без конца.
• Чтение words[0] выше проверки. Тогда первая отрисовка заканчивается ошибкой TypeError: Cannot read properties of null (reading '0').