Как отфильтровать и отправить мои данные, полученные от асинхронного вызова / ожидания

Question

Я строю проект приложения для фондового рынка в React и столкнулся с проблемой, которую пытался решить весь день, но безуспешно. Мог действительно помочь, потому что я знаю, что я близко. Код прикреплен на картинке, и я также выложу здесь:

// Search Stocks
  
const searchStocks = async () => {

  // await data from API
   
  const res = await axios(`https://financialmodelingprep.com/api/v3/searchquery=${state.text}&exchange=NASDAQ`);
   
  const res2 = await axios(`https://financialmodelingprep.com/api/v3/searchquery=${state.text}&exchange=NYSE`);

   // after data has returned in variables, then filter results
    
  const filteredResults = [...res, ...res2].filter(stock => stock.symbol.includes(state.text.toUpperCase()))

    // dispatch to have filtered results added to state to show the user
  dispatch({
    type: SEARCH_STOCKS,
    payload: filteredResults
  });
};

Итак, я дважды и трижды проверил свои методы, что я правильно фильтрую данные. Я знаю, лог c это звук. Проблема, с которой я сталкиваюсь, заключается в том, что я не хочу, чтобы код ниже моих функций ожидания выполнялся, пока я не получу свои ответы. Я пробовал все виды вариаций с использованием методов .then () без успеха. Как я могу сделать это правильно?

Снимок экрана:

Answer 1

Вот код в реакции, ожидающий и фильтрующий данные для отображения:

Я создал jsfiddle, если вам нужно: https://jsfiddle.net/prem7qdx/2/

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      data: null
    }
  }
 }
 

class SearchForm extends React.Component {

  handleSubmit(event) {
    event.preventDefault();
    const data = [...event.target.elements].reduce((data, element) => {
     if (element.name && element.value) {
        data[element.name] = element.value;
      }
  
      return data;
    }, {});
    
   let url = `https://financialmodelingprep.com/api/v3/search?query=${data.query}&&limit=10`;
    if(data.exchange !== 'ALL') {
    	url = `https://financialmodelingprep.com/api/v3/search?query=${data.query}&&limit=10&&exchange=${data.exchange}`
    }
    

    	axios.get(url)
    .then((res) => { 
    
    	let array = res.data;
      
      $('#foo').empty();

      var list = $('<ul/>');  
      for(let i = 0; i < array.length; i++) {
        	let item = $('<li/>');
          item.append(array[i].symbol+' | '+ array[i].name+' | '+ array[i].stockExchange );
       		list.append(item);

      }
 
			$('#foo').append(list);
			
    })
  };
  

  render() {
    return (
      <form action="/search" onSubmit={this.handleSubmit}>
        <input type="text" name="query" />
        <select name="exchange" defaultValue={'ALL'}>
          <option value="ALL">ALL</option>
          <option value="NASDAQ">NYSE</option>
          <option value="NYSE">NASDAQ</option>
          <option value="AMEX">AMEX</option>
          <option value="EURONEXT">EURONEXT</option>
          <option value="TSX">TSX</option>
          <option value="MUTUAL_FUND">MUTUAL_FUND</option>
          <option value="COMMODITY">COMMODITY</option>
          <option value="INDEX">INDEX</option>
          <option value="CRYPTO">CRYPTO</option>
          <option value="FOREX">FOREX</option>
          <option value="TSX">TSX</option>
          <option value="AMEX">AMEX</option>
          <option value="EURONEXT">EURONEXT</option>
        </select>
        <button>Find</button>
      </form>
    );
  }
}

ReactDOM.render(<SearchForm />, document.getElementById('app'));

body {
  margin: 20px;
  font-size: 18px;
  font-family: Arial;
}

ul {
  list-style: none;
  padding: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://npmcdn.com/@reactivex/rxjs@5.0.0-beta.4/dist/global/Rx.umd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.12.0/axios.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>


<div id='app'>
</div>
<div id="foo"></div>

Answer 2

Спасибо, что ответили, ребята! Я разговаривал с моим инструктором по bootcamp, и он помог мне и заставил код работать. На самом деле это было связано с помещением 'res.data' и 'res2.data' в массив, возвращаемый FilterResults. Я также вручную передал текст в searchStocks, потому что по какой-то причине установка текста в моем состоянии была на 1 символ позади (поэтому я передал e.target.value непосредственно в функцию searchStocks. Решение ниже:

* +1003 *https://financialmodelingprep.com/api/v3/search?query= $ {} & SYM обмен = NASDAQ ); const res2 = await axios.get( https://financialmodelingprep.com/api/v3/search?query= $ {} SYM & обмен = NYSE ); const filteredResults = [...res.data, ...res2.data].filter(stock => stock.symbol.includes(sym.toUpperCase()) ); dispatch({ type: SEARCH_STOCKS, payload: filteredResults }); };

Answer 3

ожидание все хорошо, вероятно, просто проверьте, дал ли запрос какие-либо фактические данные

    // Search Stocks

    const searchStocks = async () => {

      // await data from API

      const res = await axios(`https://financialmodelingprep.com/api/v3/searchquery=${state.text}&exchange=NASDAQ`);

      const res2 = await axios(`https://financialmodelingprep.com/api/v3/searchquery=${state.text}&exchange=NYSE`);

       // after data has returned in variables, then filter results

      let filteredResults = [];
      if(res1 && res2)
          filteredResults = [...res, ...res2].filter(stock => stock.symbol.includes(state.text.toUpperCase()))

        // dispatch to have filtered results added to state to show the user
      dispatch({
        type: SEARCH_STOCKS,
        payload: filteredResults
      });
    };

РЕДАКТИРОВАТЬ: я проверил это в случае политики CORS в Firefox, тогда как в Chrome Я этого не сделал, возможно, вы захотите это выяснить, возможно, именно поэтому топор ios не возвращает правильные данные