Блог

У меня есть массив, который выглядит следующим образом:

 const teamsAndPlayers = [
    {
        team: 'Liverpool',
        players: ['Salah', 'Henderson']
    },
    {
        team: 'Man Utd',
        players: ['Rashford', 'De Gea']
    },
    {
        team: 'Chelsea',
        players: ['Hazard', 'Willian']
    }
];
  

У меня есть 2 поля выбора, второе из которых является динамическим в зависимости от того, что выбирает пользователь. Проблема, с которой я сталкиваюсь, заключается в том, что я не уверен, что лучший способ найти связанный массив на основе выбора пользователя. Я знаю, что мог бы использовать find и другие методы, но могу ли я в любом случае сделать все это в map функции в инструкции return?

Мой код выглядит следующим образом:

 const Menu = () => {

   const [selectedTeam, setSelectedTeam] = useState(null);

   return (
      <div>
        <select 
           onChange={e => setSelectedTeam(e.target.value)} 
           id="team" 
           name="team"
        >
         {teamsAndPlayers(item => (
            <option key={item.team} value={item.team}>
               {item.team}
            </option>
        ))}

        <select id="players" name="players">
         {teamsAndPlayers(item => (
            // how can I get the related players in here 
            // based on first select choice?
        ))}

      </div>
   )
}
  

Я бы использовал object вместо array для определения входных данных для выборок (если вы действительно хотите избежать использования find). Таким образом, teamsAndPlayers будет выглядеть следующим образом:

 const teamsAndPlayers = {
  liverpool: {
    name: 'Liverpool',
    players: ['Salah', 'Henderson']
  },
  manUtd: {
    name: 'Man Utd',
    players: ['Rashford', 'De Gea']
  },
  chelsea: {
    name: 'Chelsea',
    players: ['Hazard', 'Willian']
  }
};
  

Тогда параметры внутри fisrt select будут выглядеть следующим образом:

 {Object.keys(teamsAndPlayers).map(key => (
  <option key={key} value={key}>
    {teamsAndPlayers[key].name}
  </option>
))}
  

Тогда параметры внутри второго выбора будут выглядеть следующим образом:

 {teamsAndPlayers[selectedTeam].players.map(player => (
  <option key={player} value={player}>
    {player}
  </option>
))}
  

Просто объедините find и map (если вы не хотите изменять структуру массива данных):

 const playersByTeam = teamsAndPlayers.find(({ team }) => team === selectedTeam).players

<select id="players" name="players">
  { playersByTeam.map(player => <option key={player>{ player }</option>) }
</select>