Как определить правильный тип элемента <select>? - PullRequest
Новая
       35

Как определить правильный тип элемента <select>?

0 голосов
/ 01 августа 2020

У меня есть элемент пользовательского интерфейса выбора материала: 

<Select
  labelId="demo-simple-select-label"
  id="demo-simple-select"
  value={sortType}
  onChange={handleChange}
>
  <MenuItem value={'release_date'}>Release date</MenuItem>
  <MenuItem value={'title'}>Title</MenuItem>
  {/* <MenuItem value={'Date added'}>Date added</MenuItem> */}
</Select>

Как видите, значение представляет собой строку release_date или title. Я хочу отсортировать массив в зависимости от того, какой вариант был выбран: 

type IMovie = {
  title: string;
  poster_path: string;
  release_date: string;
  id: number;
  type?: any;
};

const handleChange = event => {
  setSortType(event.target.value);
  const type = event.target.value;

  localforage.getItem<IMovie []>('trackedMovies').then((value) => {
    let trackedMovies = value;
    trackedMovies = orderBy(trackedMovies, [movie => movie.type], ['asc']);
  })    
};

Это не работает, я думаю, это потому, что trackedMovies = orderBy(trackedMovies, [movie => movie.type], ['asc']); имеет тип any.

Если я заменю тип свойством IMovie, например title или release_date, sortBy будет работать: 

 trackedMovies = orderBy(trackedMovies, [movie => movie.type], ['asc']);

Если я изменю значение в MenuItem: <MenuItem value={release_date}>Release date</MenuItem> I получить сообщение об ошибке:

Невозможно найти имя 'release_date'.

Это имеет смысл, потому что нет ссылки на {release_date}. Я мог бы решить эту проблему с помощью переключателя, но было бы намного проще / лучше (я думаю) использовать прямое значение MenuItem, чтобы решить, что должен делать метод sortBy.

1 Ответ

0 голосов
/ 02 августа 2020

Я неправильно подходил к своей функциональности (думаю). sortBy использует значение назначенного свойства для сортировки. Я думал, что он использует свойство type (что было очень неправильно).

Итак, я создал функцию retunSortType, которая принимает объект mov ie в качестве аргумента. В функции он использует переключатель, чтобы определить, какой тип сортировки используется, а затем возвращает правильный тип (название или дату выпуска). 

const returnSortType = (movie) => {
  switch (type) {
    case 'release_date':
      return movie.release_date;      
    case 'title':
      return movie.title;
  }
}

localforage.getItem<IMovie []>('trackedMovies').then((value) => {
  let trackedMovies = value;
  trackedMovies = orderBy(trackedMovies, [movie => returnSortType(movie)], ['asc']);
})

Он работает, его можно читать, и можно добавить дополнительные параметры через переключатель, так что я немного этому рад. Тем не менее, я чувствую, что есть лучшее решение.

...