Javascript 在美国，我如何处理承诺？

我有下面的react代码，它表示文本输入

 onChangeDestination(url, index) {
    this.setState(prevState => {
      const rules = [...prevState.rules];
      rules[index] = { ...rules[index], url};
      if (isURL(url+'')) {
        testURL(url).then(r=> {
          var url_status = r.data.response
          rules[index] = { ...rules[index], url_status};
        })
      } else {
         var url_status = "No URL"
         rules[index] = { ...rules[index], url_status};
      }
      return { rules };
    });
  };

英文：

如果URL通过了

isURL（）

验证，则使用自定义函数

testURL（）

查看该URL的HTTP状态（使用

axios

）

在我的模板中，有一个{props.url_status}用于相关位

问题是，即使它将所需的行为记录到控制台，它似乎并没有可靠地更新视口，我认为这与承诺有关

---

我做错了什么？

您可以通过将函数转换为异步函数并在

设置状态之前调用承诺（如果必要）来实现它。此解决方案使用易于阅读的
async/await
语法和三元条件来选择正确的状态值：

const url_status = isURL(url + '') ? (await testURL(url)).data.response : "No URL"

只有当
isURL
返回
true
时，此行才会执行您的承诺并等待它，如果是，它将返回响应部分，如果不是，它将发送
无URL

完整代码：

async onChangeDestination(url, index) {
    const url_status = isURL(url + '') ? (await testURL(url)).data.response : "No URL"
    this.setState(prevState => {
        const rules = [...prevState.rules];
        rules[index] = { 
            ...rules[index],
            url,
            url_status
        };
        return { rules };
    });
};

我建议只对某些特定的单个任务使用更多的组件。在这种情况下：您可能需要一个带有
onChange
和
值的无状态输入组件。它的父容器可以是
onChange
触发一些异步请求的容器，并且具有类似
url\u status
的状态。正如@Nit注释的那样，在promise
then
子句中设置状态。这个
url\u状态
将是其他组件的道具，所以在道具更改的情况下，该组件将自动重新渲染。。。在大多数情况下，您根本不需要使用状态。
最简单的解决方案是先解析承诺，然后再设置状态，否则您的状态更新将在承诺解析之前解析。我该怎么做？这就是我一直遇到的问题，但我似乎不知道如何阻止它。你不需要阻止它，你可以执行
testURL（…）。然后（（）=>this.setState（…）
。作为一般提示，Javascript是单线程的（除了web workers），因此您永远不想阻止任何内容，否则页面将一直挂起。