时间戳

首页 > 解决方案 > 如何处理 setState 中的承诺？

javascript - 如何处理 setState 中的承诺？

问题描述

我有以下反应代码，代表文本输入。

 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} 。

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

我究竟做错了什么？

标签： javascriptreactjs

解决方案

您可以通过将函数转换为异步并在setState. 此解决方案使用更易于阅读的async/await语法和三元条件来选择正确的状态值：

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

此行将执行您的承诺并仅在isURLreturn时等待它true，如果是，它将返回响应部分，如果不是，它将发送出去"No 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 };
    });
};

推荐阅读