Question

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

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

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

我在做什么错了？

Answer 1

您可以通过将函数转换为异步函数并在source .bashrc之前调用promise（如果需要）来实现。此解决方案使用易于理解的setState语法和三元条件来选择正确的状态值：

async/await

仅当const url_status = isURL(url + '') ? (await testURL(url)).data.response : "No URL"返回isURL时，此行才会执行您的诺言，并等待它，如果这样，它将返回响应部分，否则返回true。 / p>

完整代码：

"No URL"

Answer 2

我建议仅将某些组件用于某些特定的单个任务。在这种情况下：您可能需要一个带有onChange和value道具的无状态Input组件。它的父级可以是某个容器，其中onChange会触发一些异步请求，并具有类似url_status的状态。正如@Nit所评论的那样，在promise then子句中设置状态。 url_status将是其他组件的支持，因此在更改支持的情况下，该组件将自动重新呈现...在大多数情况下，您根本不需要使用状态。

如何处理setState中的promise？

2 个答案: