Question

我正在开发一个基于react.js的应用程序。该应用程序的要求之一是检测打开位置（国家/地区），然后在带有该国家/地区标志的表单上预先填写电话号码字段。

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

或者有其他有效的解决方案来代替检测IP地址，例如从浏览器中获取一些信息，这可以为我提供国家名称？请指导。

Answer 1

您可以使用外部API从客户端IP地址获取位置详细信息。

我已重做此操作以使用http://api.hostip.info，它是免费使用的，并且我正在使用Fetch而不是jQuery来提取数据。

function getElementText(response, elementName) {
    return response.getElementsByTagName(elementName)[0].innerHTML;
}

function getIpAddress() {

    fetch('http://api.hostip.info').then(response => {
         return response.text();
    }).then(xml => { 
        return (new window.DOMParser()).parseFromString(xml, "text/xml");
    }).then(xmlDoc => {
         countryName = getElementText(xmlDoc , "countryName");
         countryCode = getElementText(xmlDoc , "countryAbbrev");
         $("#output").html("Country name: " + countryName + "<br>" + "Country code: " + countryCode);
    });
}

<div style="text-align:center;line-height:30px;">

<button onclick="getIpAddress()">Click me to get IP AddressInfo </button>
  
  <div id="output">Location:</div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

Answer 2

您可以在不使用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>
    )
}

Answer 3

使用React钩子，可以像下面这样：

import React, { useEffect } from 'react';

 useEffect(() => {
   fetch('https://extreme-ip-lookup.com/json/')
   .then( res => res.json())
   .then(response => {
    console.log("Country is : ", response);
  })
  .catch((data, status) => {
    console.log('Request failed:', data);
  });
},[])

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

3 个答案: