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

Question

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

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

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

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>
    )
}