如何在SimpleForm上使用asyncValidation显示错误消息？

在SimpleForm上使用asyncValidation显示错误消息的方法如下：

首先，确保你已经安装了所需的依赖包。在你的项目中，你需要安装redux-form和redux-promise-middleware。
在你的表单组件中，导入所需的依赖项：

import { Field, reduxForm } from 'redux-form';
import { asyncValidate } from 'redux-form-validators';

在你的表单组件中，定义一个异步验证函数。这个函数将在表单提交之前被调用，用于验证表单字段的值。它应该返回一个Promise对象，该对象的解析值应该是一个包含错误消息的对象。

const validateAsync = async (values) => {
  // 执行异步验证逻辑，例如向服务器发送请求进行验证
  const response = await fetch('/api/validate', {
    method: 'POST',
    body: JSON.stringify(values)
  });

  const data = await response.json();

  if (!data.valid) {
    // 返回一个包含错误消息的对象
    return {
      username: '用户名已存在'
    };
  }

  // 返回一个空对象表示验证通过
  return {};
};

在你的表单组件中，使用Field组件来渲染表单字段，并将asyncValidate属性设置为你的异步验证函数。

const MyForm = (props) => {
  const { handleSubmit } = props;

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>用户名</label>
        <Field name="username" component="input" type="text" />
      </div>
      {/* 其他表单字段 */}
      <button type="submit">提交</button>
    </form>
  );
};

export default reduxForm({
  form: 'myForm',
  asyncValidate: validateAsync,
  asyncBlurFields: ['username'] // 可选，指定需要在失去焦点时进行异步验证的字段
})(MyForm);