Stack Overflow на русском Asked by Max Akinshin on January 20, 2021
Есть форма с селектами, в первом выбирается фильм из серии звёздных войн. И в двух других должны отобразиться космические корабли из выбранного фильма. Не очень понимаю как прописать условие по правильному, если делать на if то очень много кода получается, уверен что есть более рациональный способ.
Код компонента:
class StarshipsCompare extends Component {
swapiService = new SwapiService();
state = {
filmList: [],
};
componentDidMount() {
this.swapiService.getAllFilms().then((filmList) => {
this.setState({ filmList });
});
}
renderItems(arr) {
return arr.map(({ id, title }) => {
return (
<option value={title} key={id}>
{title}
</option>
);
});
}
render() {
const { filmList } = this.state;
const items = this.renderItems(filmList);
return (
<div>
<form>
<p>Выберите фильм корабли из которого хотите сравнить:</p>
<select className="custom-select">{items}</select>
<div className="row p-5">
<div className="col">
<p>Выберите корабль для сравнения:</p>
<select className="custom-select"></select>
</div>
<div className="col">
<p>Выберите корабль для сравнения:</p>
<select className="custom-select"></select>
</div>
</div>
</form>
</div>
);
}
}
И с фетчем данных:
export default class SwapiService {
_apiBase = "https://swapi.dev/api";
async getResource(url) {
const res = await fetch(`${this._apiBase}${url}`);
if (!res.ok) {
throw new Error(`Could not fetch ${url}, status: ${res.status}`);
}
return await res.json();
}
getAllFilms = async () => {
const res = await this.getResource("/films/");
return res.results.map(this._transformFilms);
};
}
Если конкретно про swapi, то кораблей меньше 20-и: https://swapi.dev/api/starships/
Их можно запросить так же, как фильмы, в начале. А на рендере:
Set
с url
-ами кораблей текущего фильма.filter
полному списку кораблей по сетуЕсли бы кораблей было очень много, то всё зависело бы от особенностей API.
Мысль такая, что подгруженный список должен помнить условия своей валидности и перезапрашиваться при изменении условий (useEffect(...,[cond])
, Promise.all
, ({items,cond})
).
Answered by Sergei Kirjanov on January 20, 2021
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP