如何在redux-form的asyncBlurField中动态传递数组？

嘿，我明白你卡在这儿了——想把redux-form的asyncValidate里硬编码的用户名数组换成服务器返回的数据对吧？这其实很简单，只需要把原来模拟延迟的sleep换成真实的API请求就行，我给你一步步说明：

1. 替换硬编码数组，改用真实API请求 #

原来的sleep只是模拟服务器延迟，现在我们直接发起请求获取服务器上的禁用用户名列表。推荐用async/await语法，比链式.then()更清晰易读。

修改后的代码示例（用fetch API）：

const asyncValidate = async (values /*, dispatch */) => {
  try {
    // 向你的服务器端点发起请求，获取禁用用户名数组
    const response = await fetch('/api/forbidden-usernames');
    
    // 检查请求是否成功
    if (!response.ok) {
      throw new Error('获取禁用用户名列表失败');
    }
    
    // 解析服务器返回的JSON数组
    const forbiddenUsernames = await response.json();

    // 验证当前输入的用户名是否在禁用列表中
    if (forbiddenUsernames.includes(values.username)) {
      throw { username: '这个用户名已经被占用啦，请换一个试试！' };
    }
  } catch (error) {
    // 分情况处理错误：如果是用户名重复的错误，直接抛出；如果是请求错误，返回通用提示
    if (error.username) {
      throw error;
    } else {
      throw { username: '验证失败，请稍后重试' };
    }
  }
};

2. 几个关键注意事项 #

• 确保API返回格式正确：你的服务器端点/api/forbidden-usernames需要返回一个JSON数组，比如["john", "paul", "george", "ringo"]
• 如果用Axios：代码逻辑类似，把fetch换成axios.get即可：

  const response = await axios.get('/api/forbidden-usernames');
  const forbiddenUsernames = response.data;
  

• 处理认证/请求头：如果你的API需要认证（比如携带token），记得在请求里加上headers：

  const response = await fetch('/api/forbidden-usernames', {
    headers: {
      'Authorization': `Bearer ${yourAuthToken}`,
      'Content-Type': 'application/json'
    }
  });
  

• 错误处理要到位：别忽略请求失败的情况（比如网络问题、服务器报错），不然用户可能看不到任何提示。

这样修改后，你的asyncValidate就会动态从服务器获取禁用用户名列表，而不是用硬编码的数组啦！

内容的提问来源于stack exchange，提问作者Ashish Choudhary