React Reduct - 选择 Onchange get 方法请求

Question

I have the following situation, i provide the a codesandbox demo to demonstrate my existing problem.

A bit of explanation about and how to reproduce the case

I am here in the component League.js , any league in the list has a link

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

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

The onclick function populates in the Details.js component the select options with the names of the teams. You can see below.

  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>
    );
  }

This is now the problem i have in Detail.js component, when i select the team name in my select i want send a get request getStats where i have to set two parameters ( team_id and league_id )

Here the relevant code

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

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

At the moment i can only pass the team_id which is the select value selectedOption

How can i also pass the league_id parameter?

I have hardcoded now putting 357 but i need to use the parameter league_id . How can i pass it from League.js Component?

Answer 1

On the top of my head, here's two solutions you may want to try:

Set each of you select's options as a tuple:

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

or set each of you select's options' team_id and league_id as data-attributes

Answer 2

I have figured it out how to pass the leagueId state

These the steps i have done

In the reducers/index.js i have created an initial state

RECEIVE_LEAGUE
  league:[],

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

In the actions/index.js

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

I have added a dispatch in the getTeamsDetailById(id)

dispatch(receivedLeague(id));

In the Details.js component

I have added the state leagueId on top

and edited my selectTeamStat function

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

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