Как вывести соответствующие данные из 2 URL в React? - PullRequest
Новая
       6

Как вывести соответствующие данные из 2 URL в React?

0 голосов
/ 22 декабря 2018

Я получаю данные по 2 ссылкам, списку монет и списку событий.Данные отображаются в разделе рендеринга. 

  componentDidMount() {
Promise.all([
  fetch('https://coindar.org/api/v2/coins?access_token=36174:fy7i3eWjxllsdwhl80c'),
  fetch('https://coindar.org/api/v2/events?access_token=36174:fy7i3eWjxllsdwhl80c&page=1&page_size=30&filter_date_start=2018-10-01&filter_date_end=2020-07-01&sort_by=views&order_by=1')])
    .then(([res1, res2]) => Promise.all([res1.json(), res2.json()]))
    .then(([data1, data2]) => this.setState({
      events: data2, 
      coins: data1,
      coinid: [],
      isLoaded: true,
    }));
}

 render() {
var {isLoaded, events, coins,coinid} = this.state;
  return (
    <div className="App">
    <ul>
    {events.map(events => (
      <li key={events.id} value={events.coin_id} > Name: {events.caption} Coin id: {events.coin_id} <!-- Image here.. coins.image_32 --> </li>))}
    </ul>
    <ul>
    {coins.map(coins => (
      <li key={coins.id}> Name: {coins.name} : Coin id: {coins.id}</li>))}
    </ul>
    </div>
  );
 }
}

URL-адреса могут быть скопированы и вставлены, чтобы увидеть данные. Я пытаюсь достичь списка событий (второго URL-адреса) с их изображениями и монетами.имя (первый URL).В других языках первым шагом может быть использование предложения where (где events.coin_id == coins.id), однако я не уверен, как это сделать с React.

1 Ответ

0 голосов
/ 22 декабря 2018

Похоже, ничего не связано с реакцией, для реализации желаемой нами функциональности достаточно просто реализации javascript.

просто введите еще 2 свойства состояния, такие как matchEvents и matchCoins, примените пункт where (где events.coin_id == coins.id)

Я не уверен, что вам нужно 2 фильтра, просто измените их в зависимости от ваших потребностей. 

componentDidMount() {
    Promise.all([
        fetch('https://coindar.org/api/v2/coins?access_token=36174:fy7i3eWjxllsdwhl80c'),
        fetch('https://coindar.org/api/v2/events?access_token=36174:fy7i3eWjxllsdwhl80c&page=1&page_size=30&filter_date_start=2018-10-01&filter_date_end=2020-07-01&sort_by=views&order_by=1')])
        .then(([res1, res2]) => Promise.all([res1.json(), res2.json()]))
        .then(([data1, data2]) => this.setState({
            events: data2,
            coins: data1,
            matchEvents: data2.filter(event => {
                return data1.some(coin => events.coin_id == coin.id)
            }),
            matchCoins: data1.filter(coin => {
                return data2.some(event => events.coin_id == coin.id)
            }),
            coinid: [],
            isLoaded: true,
        }));
}

render() {
    var { isLoaded, events, coins, coinid, matchEvents, matchCoins } = this.state;
    return (
        <div className="App">
            <ul>
                {matchEvents.map(events => (
                    <li key={events.id} value={events.coin_id} > Name: {events.caption} Coin id: {events.coin_id} <!-- Image here.. coins.image_32 --> </li>))}
            </ul>
            <ul>
                {matchCoins.map(coins => (
                    <li key={coins.id}> Name: {coins.name} : Coin id: {coins.id}</li>))}
            </ul>
        </div>
    );
}
...