React Reduct - выберите Onchange, запрос метода get

Question

У меня следующая ситуация, я предоставляю демонстрационную версию codesandbox , чтобы продемонстрировать мою существующую проблему.

Небольшое объяснение и как воспроизвести случай

Я нахожусь здесь в компоненте League.js, любая лига в списке имеет ссылку

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

  const onClick = (evt, id) => {
    evt.preventDefault();
    getDetail(id)
  };

Функция onclick заполняет в компоненте Details.js select options названиями команд. Вы можете видеть ниже.

  if (teamsDetail.length) {
    details = (
      <select value={selectedOption} onChange={selectTeamStat}>
        {teamsDetail && teamsDetail.length > 0
          ? teamsDetail.map(item => (
              <option key={`${item.team_id}`} value={item.team_id}>
                {item.name}
              </option>
            ))
          : null}
      </select>
    );
  }

Это проблема, с которой я столкнулся в компоненте Detail.js, когда я выбираю название команды в моем выборе, я хочу отправить запрос на получение getStats, где мне нужно установить два параметра (team_id and league_id)

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

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

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

На данный момент я могу только передать team_id, который является выбранным значением selectedOption

Как я могу также передать параметр league_id?

Я жестко запрограммировал сейчас, добавив 357, но мне нужно использовать параметр league_id. Как я могу передать его от League.js Компонента?

Answer 1

Я понял, как пройти состояние leagueId

Эти шаги я сделал

В reducers/index.js я создал начальное состояние

RECEIVE_LEAGUE
  league:[],

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

В actions/index.js

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

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

dispatch(receivedLeague(id));

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

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

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

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

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

Answer 2

В верхней части моей головы, вот два решения, которые вы можете попробовать:

Установите каждый из выбранных вами вариантов как кортеж:

value={[item.league_id, item.team_id]}

или установите каждый из выбранных вами вариантов параметры 'team_id и league_id в качестве атрибутов данных