可选字段的 Redux 表单异步验证

Question

问题：

如果我不向 asyncValidate 函数传递承诺，它会失败并显示 asyncValidation.js:8 Uncaught Error: asyncValidate function passed to reduxForm must return a promise 我如何才能访问传递给 asyncValidat 函数中的组件的道具 failed validation image.

我的情况：

表单有选项 select 固定 URL 然后如果你想输入自定义 URL 你可以 select 自定义复选框并输入 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;
      });
  }
};

搜索并发现：

但似乎没有任何效果，如果我们必须 return 在其他方面做出承诺，最好的方法是什么

Answer 1

我认为问题是您 return 在 if 之外未定义，尝试重构为 return 任何一种方式的承诺

只是 return Promise.resolve() 在你的 if 之后，我猜你也可以 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();
};

可选字段的 Redux 表单异步验证

Redux-form async validation on optional field

reactjs

redux

redux-form