为什么 React-Native 不显示 Axios 获取的数据？

Question

我已经通过这个命令安装了axios：

npm i axios

我写了下面的代码，我认为一切都是正确的，但是 React-Native 没有显示任何数据并抛出任何错误：

import React, {useState, useEffect} from 'react';
import axios from 'axios';

import {
  View,
  Text,
  StyleSheet
} from 'react-native';

const App = () => {
    
    const [data, setData] = useState([]);
    
    useEffect(() => {
        axios.get('http://localhost:8000/posts').then(res => {
            setData(res.data);
        });
    }, []);
    
    return (
        <View style={styles.mainBody}>
            {
                
                data.map(item => (
                    <View>
                        <Text>{item.fields.title}</Text>
                    </View>
                ))
                
            }
        </View>
    );
};

• 我已经为此测试了 functional 和 class-based 组件。

• 我使用 Postman 获取数据并且工作正常。

• 我添加了.catch，它显示：Error: Network Error

但它在 React-Native 上不起作用，并且由于没有错误，我无法理解我的问题是什么。任何帮助将不胜感激。

Answer 1

这是因为您在 URL 中使用了 localhost，使用 react-native 我们不能使用 localhost，而是使用计算机的 IPv4 地址。所以点击你的wifi图标然后点击属性然后寻找IPv4 address类似：193.93.443

所以如果说你的 IPv4 地址是 193.93.443，那么本地 URL 会是这样的：http://193.93.443:8000/posts