如何解决错误：不能在 React 的异步函数之外使用关键字 'await'

Question

我想从该设备动态获取 IP 地址（因为它会超时更改），然后使用来自 node.js 服务器的 fetch:https://{ipadress}:5000/users 中的链接从数据库中获取 JSON。但现在它给了我一个错误 Can not use keyword 'await' outside an async function。我不知道如何解决它。 函数publicIP() 是问题所在。

async componentDidMount() {
            this.drawOnCanvas();
            var ipAdress = '';
            publicIP()
            .then(ip => {    
                console.log(ip);
                const url = "http://" + ip + ":5000/user";
                const response = await fetch(url);
                const data = await response.json(); 
                this.setState({userData: data});
                console.log(this.state.userData);
            // '47.122.71.234'
            })
            .catch(error => {
            console.log(error);
            // 'Unable to get IP address.'
            });
           

Answer 1

您不应将async/await 与.then().catch() 混用。选择你更喜欢的一个并坚持下去。所以在你的情况下你应该这样做

componentDidMount() {
  this.drawOnCanvas();
  var ipAdress = '';
  return publicIP()
    .then(ip => {    
      console.log(ip);
      const url = "http://" + ip + ":5000/user";
      return fetch(url);
    })
    .then(res => {
      return res.json();
    })
    .then(data => {
      this.setState({userData: data});
      console.log(this.state.userData);            
    })
    .catch(error => {
       console.log(error);
    });
}

或

async componentDidMount() {
  try {
    this.drawOnCanvas();
    var ipAdress = '';
    const ip = await publicIP()
    console.log(ip);
    const url = "http://" + ip + ":5000/user";
    const response = await fetch(url);
    const data = await response.json(); 
    this.setState({userData: data});
    console.log(this.state.userData);
  } catch (error) {
    console.log(error);
  }
}

Answer 2

试试这样：

async componentDidMount() {
    this.drawOnCanvas();
    try
    {
        var ip = await publicIP();
        console.log(ip);

        const url = "http://" + ip + ":5000/user";
        const response = await fetch(url);
        const data = await response.json(); 
        this.setState({userData: data});
        console.log(this.state.userData);  // '47.122.71.234'
    } catch(error) {
        console.log(error);  // 'Unable to get IP address.'
    }
}

另外我认为你应该使用async/await或.then/.catch，但不要混合使用。