Node.js 如何解决错误：不能在React中的异步函数外部使用关键字“wait”

我想从这个设备动态获取ip地址，因为它会超时更改，然后使用fetch:https://{ipAddress}:5000/users from node.js server中的链接从数据库中获取JSON。但现在它给了我一个错误，不能在异步函数外使用关键字'await'。我不知道怎么解决它。 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.'
            });
           

您不应该将async/wait与.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/wait与.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() {
    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，但不要将它们混合使用。

尝试如下：

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，但不要将它们混合使用。

在第一个代码示例中，是否需要在publicIP之前返回@你看情况。对于react组件，我可能不太熟悉react，所以我可能在这里错了。在一般情况下，如果您希望某个方法xy成为承诺链的一部分，是的，因为这不会等待承诺解析/rejectcomponentDidMount是一个生命周期方法，这里不需要该返回。在第一个代码示例中，是否需要在publicIP之前返回@你看情况。对于react组件，我可能不太熟悉react，所以我可能在这里错了。在一般情况下，如果您希望某个方法xy成为承诺链的一部分，可以，因为否则这不会等待承诺解析/拒绝ComponentDidMount是一个生命周期方法，这里不需要返回。谢谢！成功了。由于某些原因，我得到了错误的ip，这与我在命令提示符下键入ipconfig并转到ipv4时不同。有没有办法获得正确的IP？所以我可以获取它。看起来你想调用本地机器上的端点，对吗？那么，为什么你不能使用固定值127.0.0.1或localhost作为你的ip呢？我也想从其他计算机连接到这个应用程序。因此，我需要运行react应用程序的计算机的本地ip。这样其他计算机也可以获取json数据OK，但其他计算机如何知道运行react应用程序的主机的ip地址？我认为你必须在消费者中硬编码地址，或者做一些路由，比如编辑主机配置，将ip地址映射到dns名称。据我所知，React只是一种客户端技术。因此，您需要在希望使用此前端的计算机上启动本地服务器。该服务器只为前端提供JS和HTML文件。这里没有涉及后端服务。如果您想调用后端获取一些数据，您需要后端技术以及NodeJS、Java等。谢谢！成功了。由于某些原因，我得到了错误的ip，这与我在命令提示符下键入ipconfig并转到ipv4时不同。有没有办法获得正确的IP？所以我可以获取它。看起来你想调用本地机器上的端点，对吗？那么，为什么你不能使用固定值127.0.0.1或localhost作为你的ip呢？我也想从其他计算机连接到这个应用程序。因此，我需要运行react应用程序的计算机的本地ip。这样其他计算机也可以获取json数据OK，但其他计算机如何知道运行react应用程序的主机的ip地址？我认为你必须在消费者中硬编码地址，或者做一些路由，比如编辑主机配置，将ip地址映射到dns名称。据我所知，React只是一种客户端技术。因此，您需要在希望使用此前端的计算机上启动本地服务器。该服务器只为前端提供JS和HTML文件。这里没有涉及后端服务。如果您想调用后端来获取一些数据，您需要一种后端技术以及NodeJS、Java等等。。。。