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

Question

我正在尝试制作一个简单的form .

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

async-validator: ["username is required"]

async-validator: ["passwordis required"]

但错误并未呈现。

父级

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;

Answer 1

为了帮助将来访问此页面的人:

作者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}),
    ],
}