ReactJS: фильтровать рендеринг списка только по целым именам?
В настоящее время я отображаю список данных, возвращаемых из API, с помощью функции map() следующим образом:
renderLocation() {
return this.props.locations.map(location => {
return (
<div key = {location.id}>
<div className = "location">
<h1>
{location.name}
{location.airport_code}
</h1>
<div className = "location-secondary-info">
<span>
<i className = "material-icons">airplanemode_active</i>
{location.description}
</span>
</div>
</div>
</div>
);
});
}
Теперь я хочу отфильтровать рендеринг, чтобы отображались только те locations, которые имеют правильное значение поля name. Мои данные API выглядят так:
Я хочу, чтобы locations отображался только в том случае, если locations.name является действительным названием города.
Так, например, местоположение с name из "Chicago O'Hare" будет допустимым названием города и должно отображаться. Однако местоположение с name из "Chicago O'Hare A5C" не должно отображаться, поскольку оно имеет A5C в конце, что делает его недействительным.
Ответы 1
Одним из подходов может быть использование регулярного выражения для фильтрации местоположений на основе наличия буквенно-цифрового суффикса подстроки в поле name местоположения с помощью следующего:
const filteredLocations = this.props.locations.filter(location => {
return !location.name.match(/[A-Z0-9]+$/)
});
Приведенная выше логика в основном говорит:
"filter all locations where the location's name doesn't have an alphanumeric word at the end of it".
Интеграция этого в вашу функцию renderLocation() может быть достигнута с помощью:
renderLocation() {
/* Filter locations with name that doesn't have alphanumeric suffix word */
const filteredLocations = this.props.locations.filter(location => {
return !location.name.match(/[A-Z0-9]+$/)
});
/* Render only the filtered location with name Chicago O'Hare */
return filteredLocations.map(location => {
return (
<div key = {location.id}>
<div className = "location">
<h1>
{location.name}
{location.airport_code}
</h1>
<div className = "location-secondary-info">
<span>
<i className = "material-icons">airplanemode_active</i>
{location.description}
</span>
</div>
</div>
</div>
);
});
}
надеюсь, это поможет
Точно, только название города, без суффикса или каких-либо завершающих символов после него. Это единственные, которые я хочу отображать в браузере.
Вот в чем вопрос, у нас есть свойство name и значение равно city, но потом есть дубликаты, где стоит city с этим a5c или q5 после него, все в виде строки. Поэтому я думаю, что должен быть какой-то синтаксический анализ строки, чтобы вернуть мне только значения с названием города и ничего после него.
Итак, первое название города из трех дубликатов для каждого названия города — это то, что я хочу отобразить. Итак, я только что понял, что первое значение каждого города не имеет завершающих символов. поэтому мне просто нужен первый из трех дубликатов для всех городов.
Когда я реализовал ваше решение, мои данные полностью исчезли, не отображаясь в браузере. Никаких сообщений об ошибках, знаете ли, белый экран смерти. Похоже, происходит то, что ! избавляется от всего этого.
бум! ты сделал это. Спасибо Дакре.
Это не только Chicago O Hare, но и все города, в конце которых нет завершающих символов, а только название города. Чикаго О Хэйр — всего лишь один из множества городов.