如何使用redux表单显示初始页面加载时的所有错误？

// 在Redux的store中创建formErrors状态字段
const initialState = {
  formErrors: {}
};

// 表单验证函数
const validate = values => {
  const errors = {};

  // 对每个表单字段进行验证
  if (!values.username) {
    errors.username = '用户名不能为空';
  }

  if (!values.password) {
    errors.password = '密码不能为空';
  }

  return errors;
};

// 表单组件
class LoginForm extends React.Component {
  render() {
    const { formErrors } = this.props;

    return (
      <form>
        <div>
          <label>用户名</label>
          <Field name="username" component="input" type="text" />
          {formErrors.username && <span>{formErrors.username}</span>}
        </div>
        <div>
          <label>密码</label>
          <Field name="password" component="input" type="password" />
          {formErrors.password && <span>{formErrors.password}</span>}
        </div>
        <button type="submit">提交</button>
      </form>
    );
  }
}

// 将formErrors状态字段映射到组件的props中
const mapStateToProps = state => ({
  formErrors: state.formErrors
});

// 使用connect函数连接组件和Redux store
LoginForm = connect(mapStateToProps)(LoginForm);

// 在Redux的store中使用redux-form创建表单
const store = createStore(combineReducers({
  form: formReducer,
  formErrors: (state = {}) => state
}), initialState);

// 渲染表单组件
ReactDOM.render(
  <Provider store={store}>
    <LoginForm />
  </Provider>,
  document.getElementById('root')
);