Ax ios в response-native возвращает пустой массив данных, но POST man возвращает некоторые данные - PullRequest
Новая
       5

Ax ios в response-native возвращает пустой массив данных, но POST man возвращает некоторые данные

1 голос
/ 27 мая 2020

My POSTMAN request Я работал над ресторанным приложением и использую Yelp в качестве источника API. Я использую Ax ios как запрос, а не выборку. Мне возвращается пустой массив, когда я использую местоположение как 'delhi', которое является допустимым местоположением, потому что я получаю правильный ответ с POSTMAN

yelp. js

    const axios = require('axios');

export default axios.create({
  baseURL: 'https://api.yelp.com/v3/businesses',
  headers: {
    Authorization:
      'Bearer VALID KEY(working on POSTMAN)',
  },
});

экран. js

import React, {useState} from 'react';
import {StyleSheet, View, Text} from 'react-native';
import SearchB from '../reusableC/SearchB';
import yelp from '../api/yelp';

const Search = () => {
  const [string, setString] = useState('');
  const [results, setResults] = useState([]);

  const searchApi = async () => {
    const response = await yelp.get('/search', {
      params: {
        limit: 50,
        location: string,
      },
    });
    setResults(response.data.businesses);
  };
  return (
    <View>
      <SearchB
        style={styles.fontS}
        string={string}
        onTermChange={newString => setString(newString)}
        onTermSubmit={() => console.log(results)}
      />
      <Text> Searched :</Text>
      <Text> {results.length}</Text>
      <Text
        style={{
          fontSize: 20,
          fontWeight: '400',
          position: 'absolute',
          top: 55,
          left: 100,
          right: 10,
        }}>
        {string}
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  fontS: {
    fontSize: 20,
  },
});

export default Search;

когда я консоль регистрирую результаты

[] возвращается

Я попытался сделать запрос через Почтальон, и он вернул правильные данные, в отличие от приложения.

1 Ответ

1 голос
/ 27 мая 2020

Фактически вы не вызываете метод, поэтому вызов API не инициируется. Вы можете использовать ловушку useEffect для получения данных, вызвав этот метод следующим образом. 

import React, {useState, useEffect} from 'react';
import {StyleSheet, View, Text} from 'react-native';
import SearchB from '../reusableC/SearchB';
import yelp from '../api/yelp';

const Search = () => {
  const [string, setString] = useState('');
  const [results, setResults] = useState([]);

  useEffect(() => {
    const searchApi = async () => {
      const response = await yelp.get('/search', {
        params: {
          limit: 50,
          location: string,
        },
      });
      setResults(response.data.businesses);
    };
    searchApi();
  }, []);

  return (
    <View>
      <SearchB
        style={styles.fontS}
        string={string}
        onTermChange={newString => setString(newString)}
        onTermSubmit={() => console.log(results)}
      />
      <Text> Searched :</Text>
      <Text> {results.length}</Text>
      <Text
        style={{
          fontSize: 20,
          fontWeight: '400',
          position: 'absolute',
          top: 55,
          left: 100,
          right: 10,
        }}>
        {string}
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  fontS: {
    fontSize: 20,
  },
});

export default Search;

Подробнее об извлечении данных с помощью хуков -> https://www.robinwieruch.de/react-hooks-fetch-data

...