如何處理setState中的promise？

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

您可以通過將函數轉換為異步並在setState之前調用promise（如果需要）來實現。 此解決方案使用易於閱讀的async/await語法和三元條件來選擇正確的狀態值：

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

該行將執行您的promise，並且僅在isURL return 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 };
    });
};

Answer 2

我建議僅將某些組件用於某些特定的單個任務。 在這種情況下：您可能需要一個具有onChange和value prop的無狀態Input組件。 它的父級可能是某個容器，其中onChange會觸發一些異步請求，並且其狀態類似於url_status 。 正如@Nit注釋的那樣，在promise then子句中設置狀態。 此url_status將是其他組件的支持，因此，在更改支持的情況下，該組件將自動重新呈現...在大多數情況下，您根本不需要使用狀態。