TransWikia.com

fetch данных в select react

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

One Answer

Если конкретно про 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

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP