可选字段上的 Redux-form 异步验证

Question

问题：

如果我没有从 asyncValidate 函数传递承诺，它会因asyncValidation.js:8 Uncaught Error: asyncValidate function passed to reduxForm must return a promise 而失败，我如何访问传递给asyncValidat 函数中的组件的道具 failed validation image.

我的情况：

表单具有选择固定 URL 的选项，然后如果您想输入自定义 URL，您可以选中自定义复选框并在文本字段中输入 URL。我需要验证输入的自定义 URL。

只有当用户选择输入自定义 URL 时，该字段才有值。当您在我的自定义 URL 文本字段中发送值时，它可以正常工作。当我不向字段发送值时，提交失败并出现上述错误

异步验证器代码：

const asyncValidate = values => {
  const { custom_url } = values;
  const noFeedError = { custom_url: "No feeds found" };
  const fetchFailedError = { custom_url: "Fetch failed, try again" };

  if (custom_url && custom_url !== "") {
    return fetchOnlineFeeds(custom_url) //fetches if URL is valid fails with 503 
      .then(feedResult => {
        if (feedResult.error) {
          throw noFeedError;
        }
      })
      .catch(() => {
        throw fetchFailedError;
      });
  }
};

搜索并找到：

• https://github.com/redux-form/redux-form/issues/1166
• https://github.com/redux-form/redux-form/issues/1297

但似乎没有任何效果，如果我们必须以其他方式返回承诺，那么最好的方法是什么

Answer 1

我认为问题是你在 if 之外返回 undefined，尝试重构以返回一个承诺

在你的 if 之后返回 Promise.resolve()，我猜你也可以改为 return new Promise()

const asyncValidate = values => {
  const { custom_url } = values;
  const noFeedError = { custom_url: "No feeds found" };
  const fetchFailedError = { custom_url: "Fetch failed, try again" };

  if (custom_url && custom_url !== "") {
    return fetchOnlineFeeds(custom_url) //fetches if URL is valid fails with 503 
      .then(feedResult => {
        if (feedResult.error) {
          throw noFeedError;
        }
      })
      .catch(() => {
        throw fetchFailedError;
      });
  }
  return Promise.resolve();
};