Реакция - заполнение первого варианта выбора с состоянием Redux - PullRequest
Новая
       60

Реакция - заполнение первого варианта выбора с состоянием Redux

2 голосов
/ 20 марта 2020

У меня есть компонент League.js, где есть 4 поля, содержащие данные команды Лиги.

Данные команды поступают из этого API => https://www.api-football.com/demo/api/v2/teams/league/${id}

Когда я нажимаю на каждый из ящики лиги, которые я заполняю в раскрывающемся списке в моем компоненте Details.js

Я не получу team_id первой команды в раскрывающемся списке каждый раз, когда я нажимаю на каждую лигу поля в League.js для правильного вычисления в компоненте с именем Stat.js. Для этого я делаю запрос вызова к этой конечной точке => https://www.api-football.com/demo/api/v2/statistics/${league}/${team}

Так что мне нужно передать league_id и team_id в качестве параметра, я могу получить оба значения правильно, но я делаю что-то не так о том, как передать первые team_id команды для каждой лиги.

Это шаги, я поставил только соответствующий код. Я создаю firstTeamStats состояние, которое отправляю

В моих действиях => index. js

export const RECEIVE_FIRST_TEAM_STATS = "RECEIVE_FIRST_TEAM_STATS";

export const receivedFirstTeamStats = json => ({
  type: RECEIVE_FIRST_TEAM_STATS,
  json: json
});



.get(`https://www.api-football.com/demo/api/v2/teams/league/${id}`)
.then(res => {
  let teams = res.data.api.teams;
  dispatch(receivedFirstTeamStats(teams[0].team_id));
})

в моих reducer => index.js 

case RECEIVE_FIRST_TEAM_STATS:
  return {
    ...state,
    firstTeamStats: action.json,
    isTeamsDetailLoading: false
  };

в моей Лиге. js component 

import {getTeamsStats} from "../actions";

const mapStateToProps = state => ({
  firstTeamStats: state.firstTeamStats
});

const mapDispatchToProps = {
  getStats: getTeamsStats,
};

const onClick = (evt, id, firstTeamStats) => {
  evt.preventDefault();
  getDetail(id); \\  get the team names in the Detail.js component
  getStats(id, firstTeamStats); \\ get the state value for the first team in the dropdown in Detail.js component
};

<a href={`#${item.league_id}`} onClick={(e) => onClick(e, item.league_id, firstTeamStats)}

Прямо сейчас firstTeamStats в приведенном выше методе onclick правильно возвращает первое значение состояния команды, но в существующей лиге, а не в той, где я нажимаю, и это то, что я хочу.

Однако я могу получить это правильно в Details.js Компоненте, я поместил туда {firstTeamStats} в демонстрация, в которой я воспроизвел свой случай => https://codesandbox.io/s/romantic-solomon-6e0sb (используйте расширение CORS Unblock Chrome, чтобы увидеть)

Итак, вопрос в том, как правильно передать {firstTeamStats} в League.js в методе onclick на запрос getStats(id, firstTeamStats), где {firstTeamStats} - это состояние моего первого team_id в лиге?

1 Ответ

1 голос
/ 23 марта 2020

Когда вы делаете вызов API, это асинхронное событие. Вы должны всегда ждать, прежде чем использовать его ответ в следующей строке.

Итак, внутри getDetail() вы делаете вызов API. Но вы не объявили этот метод как asyn c. поэтому вы не ожидаете его завершения, и в следующей строке вы вызываете метод getStats() со старыми данными. Вот почему ваше приложение всегда будет на шаг позади, чем ваши DOM-события.

  • Одним из способов будет использование async|await и возврат ответа API от функции вместо использования dispatch .

  • Вы также можете вызывать getTeamsStats() внутри getTeamsDetailById() после получения ответа API вместо вызова его внутри OnClick() события.

const onClick = (evt, id, firstTeamStats) => { evt.preventDefault(); getDetail(id); \\ this is an async api call. you should have used await here. getStats(id, firstTeamStats); \\ It will execute before the new stats are fetched };

В статистике. js не следует строго проверять эти поля для отображения статистики ... это только цифры .. также может быть 0 во время. поэтому, пожалуйста, удалите эти проверки. 

if (
     teamsStatsWinHome &&
     teamsStatsWinAway &&
     teamsStatsDrawHome &&
     teamsStatsDrawAway &&
     teamsStatsLoseHome &&
     teamsStatsLoseAway
   ) {

У меня есть рабочий экземпляр вашего приложения ... проверьте ниже. https://codesandbox.io/s/charming-dewdney-zke2t

Дайте мне знать, если вам что-нибудь понадобится.

...