react-native 中的 Axios 返回空的数据数组，但 POST 人返回一些数据答案

【问题标题】：Axios in react-native returns empty array of data but POST man returns some datareact-native 中的 Axios 返回空的数据数组，但 POST 人返回一些数据
【发布时间】：2020-05-27 10:22:34
【问题描述】：

我一直在开发一个餐厅应用程序并使用 Yelp 作为 API 源。我使用 Axios 作为请求而不是获取。 当我将该位置用作“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)',
  },
});

screen.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;

当我在控制台记录结果时

[ ] 返回

我尝试通过 Postman 发出请求，但它返回了与应用程序不同的有效数据。

【问题讨论】：

您能出示您的 POSTMAN 请求吗？
我上传了，看看
我能知道你在什么时候调用了 searchApi 方法吗？
非常感谢，你的这个提示，我明白了？？？？

标签： javascript android reactjs react-native axios

【解决方案1】：

您实际上并未调用该方法，因此 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

【讨论】：