javascript - 如何修复 Axios.get 未正确传入动态 IP

Question

我创建了一个需要访问者 IP 地址的动态 URL，然后生成一个令牌！令牌生成正常，IP地址传入并设置状态！但是，当我将 this.state.ip 传递到下一个动态 URL 时，它没有捕获它......相反，它是空白的，尽管我在我的状态下看到它。当我将状态复制并粘贴到 URL、硬编码并运行它时，它就可以工作了！我对这里发生的事情感到非常困惑，还有其他什么可以使用 React 获取公共 IP 地址吗？32位的IP地址？

我试图解析它，但 IP 地址包含数字和字母。尝试了许多不同的端点来使用，没有运气。

    this.state = {
      id: this.props.match.params.id,
      generatedTicket: '',
      ip: []
    };
  }

  componentDidMount() {
    axios
      .get(`https://ip.seeip.org/geoip`)
      .then(res => {
        console.log('ip:', res.data.ip);
        this.setState({
          ip: res.data.ip
        });
      })
      .catch(err => {
        console.log(err);
      });

    const ip = this.state.ip;
    console.log(ip);
    axios
      .get(
        `https://cors-anywhere.herokuapp.com/videospider.in/getticket.php?key=0000000000&secret_key=000000000000000000000&video_id=${
          this.props.match.params.id
        }&ip=${ip}`
      )
      .then(res => {
        console.log('response:', res);
        this.setState({
          generatedTicket: res.data
        });
      })
      .catch(err => {
        console.log(err);
      });
  }

预期结果是一个如下所示的 URL： https://cors-anywhere.herokuapp.com/videospider.in/getticket.php?key=0000000000&secret_key=0000000000000000000000&video_id=00000&ip=1234:5678:90124:5678:9012： 3456:7890

当然，这些不是实际数字，只是出于安全目的的占位符。键等所有其他部分都很完美，是 IP 引起了问题！实际输出为空白。如果我像硬编码一样传入，错误消息是：原因：票证是为 IP 地址 12345 创建的，您的 IP 地址是 0000:0000:0000:0000:0000:0000:0000:0000

但对于实际的，它会抛出错误：原因：为 IP 地址创建票证，您的 IP 地址为 0000:0000:0000:0000:0000:0000:0000:0000（此空间为空白）

标签： javascriptreactjs