Реакция - обновление состояния Redux, но не отображается в компоненте - PullRequest
Новая
       66

Реакция - обновление состояния Redux, но не отображается в компоненте

0 голосов
/ 17 марта 2020

У меня есть компонент Details.js, где я заполняю команды из 4 лиг в раскрывающемся списке выбора

В зависимости от выбранной команды состояния в компоненте State.js обновляются

Проблема в том, что в зависимости от выбранной команды, иногда состояние отображается в State.js, а иногда нет.

В консоли нет ошибок, а в инструменте redux состояния обновляются правильно.

Я использую https://www.api-football.com/ для потребления данных.

Здесь соответствующий код

В редукторах / индексе. js i создали начальное состояние 

RECEIVE_LEAGUE
  league:[],

case RECEIVE_LEAGUE:
  return {...state, leagueId: action.json};

В action / index. js

export const receivedLeague = json => ({
  type: RECEIVE_LEAGUE,
  json: json
});

Я добавил отправку в getTeamsDetailById(id)

dispatch(receivedLeague(id));

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

Я добавил состояние leagueId сверху

и отредактировал мою selectTeamStat функцию 

  const [selectedOption, setSelectedOption] = useState('');

  const selectTeamStat = (evt) => {
     const { value } = evt.target;
     setSelectedOption(value)
     getStats(leagueId, value);
  };

Я предоставил демо в коды и поле , воспроизводящий случай здесь (Необходимо использовать Google Chrome extensi на CORS Unblock, чтобы увидеть или любое другое расширение, разблокирующее CORS)

Для воспроизведения случая, например, выберите Flamen go в Ser ie A, и состояние будет обновлено и не будет отображаться в компоненте, но если вы выберите Botafo go он отображается. Почему?

1 Ответ

1 голос
/ 18 марта 2020 
if (
  teamsStatsWinHome !== null && // maybe you also need to add `typeof object === 'undefined'`
  teamsStatsWinAway !== null &&
  teamsStatsDrawHome !== null &&
  teamsStatsDrawAway !== null &&
  teamsStatsLoseHome !== null &&
  teamsStatsLoseAway !== null
)

, чтобы избежать повторения, вы также можете использовать, но, возможно, первый способ легче читать 

const isNullOrUndefined = (object) => object === null || typeof object === 'undefined';

if(![
  teamsStatsWinHome,
  teamsStatsWinAway,
  teamsStatsDrawHome,
  teamsStatsDrawAway,
  teamsStatsLoseHome,
  teamsStatsLoseAway,
].some(isNullOrUndefined))
...