如何在react js中使用IP获取国家代码和国家名称

Question

我正在开发一个基于 react.js 的应用程序。该应用程序的其中一项要求是检测打开它的位置（国家/地区），然后在表格的电话号码字段中预先填写该国家/地区的国旗。

我认为首先检测 IP 地址然后使用该 IP 地址找出国家/地区名称会更有效地完成。为此，我尝试了很多库，例如“iplocation”、“geoip-country-lite”、“ip”等，但这些库与我的应用程序不兼容。任何人都可以建议我使用其他图书馆来获取国家名称吗？

或者有任何其他有效的解决方案而不是检测 IP 地址，例如从浏览器获取一些信息，这些信息可以让我知道国家名称？请指导。

原文由 Muhammad Sufyan Ramzan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以在不使用 jQuery 的情况下执行此操作。

从 npm 安装和导入 axios

 import axios from 'axios'

使用国家名称和国家代码初始化您的组件状态

constructor(props) {
    super(props);
    this.state = {
        countryName: '',
        countryCode: ''
    }
}

将此功能添加到您的组件

getGeoInfo = () => {
    axios.get('https://ipapi.co/json/').then((response) => {
        let data = response.data;
        this.setState({
            countryName: data.country_name,
            countryCode: data.country_calling_code
        });
    }).catch((error) => {
        console.log(error);
    });
};

并调用 this.getGeoInfo() 将国家名称和国家代码设置为您所在的州。我从 componentDidMount() 调用它

componentDidMount(){
    this.getGeoInfo();
}

您可以阅读状态以获取国家名称和国家代码

render() {
    return (
        <div>
            <p>Country Name: {this.state.countryName}</p>
            <p>Country Code: {this.state.countryCode}</p>
        </div>
    )
}

原文由 nadunc 发布，翻译遵循 CC BY-SA 4.0 许可协议