reactjs - 表单异步验证器未呈现

我试图做一个简单的form。

如果输入了所有有效数据，我将能够获取所有有效数据，如果未输入，则会在控制台上收到错误：


  异步验证程序：[“必须输入用户名”]
  
  异步验证程序：[“需要密码”]


但是这些错误并未呈现。



父母

const HomePage = () => (
  <Layout className="layout" style={{ minHeight: '100vh' }}>
    <Header>Teste</Header>
    <Content className={_s.Content}>
      <LoginForm />
    </Content>
    <Footer style={{ textAlign: 'center' }}>React Node Boilerplate by Igor Cesar</Footer>
  </Layout>
);

export default HomePage;

形成

class LoginForm extends React.Component {
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;

    return (
      <Form onSubmit={this.handleSubmit} className={_s.loginForm}>
        <Form.Item>
          {getFieldDecorator('username', {
            rules: [{ required: true, message: 'Please input your username!' }]
          })(
            <Input
              prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
              placeholder="Username"
            />
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('password', {
            rules: [{ required: true, message: 'Please input your Password!' }]
          })(
            <Input
              prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
              type="password"
              placeholder="Password"
            />
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('remember', {
            valuePropName: 'checked',
            initialValue: true
          })(<Checkbox>Remember me</Checkbox>)}
          <a className={_s.loginFormForgot} href="/">
            Forgot password
          </a>
          <Button type="primary" htmlType="submit" className={_s.loginFormButton}>
            Log in
          </Button>
          Or <a href="/">register now!</a>
        </Form.Item>
      </Form>
    );
  }
}

const WrapperLoginForm = Form.create()(LoginForm);

export default WrapperLoginForm;

最佳答案

为了帮助以后会访问此页面的人：

作者reported the bug to antdesign并找到了解决方案。

这是lodash-webpack-plugin的问题，所需的更改在webpack.config.js中。原来LodashModuleReplacementPlugin()应该接收{paths: true}作为参数，问题已经解决了。

module.exports = {
    //... rest of your webpack config
    plugins: [
        //... rest of your plugins
        new LodashModuleReplacementPlugin({paths: true}),
    ],
}

关于reactjs - 表单异步验证器未呈现，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57016592/