React SetState в обработчике событий ведет себя по-разному с имитируемыми данными и данными из API

Question

Я воспроизвожу точно такой же случай (тот же код) между двумя сценариями ios.

1. С имитацией данных
2. С запросом данных из API

1) Case with Data Mocked => https://codesandbox.io/s/select-demo-0e90s работает, как ожидалось

Имитация данных следующая

const [items] = React.useState([
  { id: "1", name: "First Element" },
  { id: "2", name: "Second Element" },
  { id: "3", name: "Third Element" }
]);

setSelectedName(item.name) = > правильно возвращает имя элемента

2) Случай с запросом API (чтобы разрешить запрос, подключаемый модуль CORS Chrome должен быть активирован) => https://codesandbox.io/s/select-demo-71u7h

Данные поступают из запроса вызова в action/index.js => fetchLeaguesList()

В компоненте League.js

setSelectedLeagueName(item.name) => TypeError Невозможно прочитать свойство name of undefined, item в этом случае undefined

Итак, мой вопрос: почему item не определено во втором случае? Как я могу исправить это в этом сценарии?

Answer 1

Это потому, что внутри League.js в строке 19 вы делаете const item = items.find(item => item.id === value);

Но модель JSON, которая возвращается из API, формируется не со свойством id, а скорее league_id.

Затем вы должны изменить строку на const item = items.find(item => item.league_id == value);