当状态/道具发生变化时，Antd 3.26 表单验证消息不会用新值重新渲染

Question

我有一个使用 Antd 3.26 的 React 应用程序（我无法将其迁移到新版本）。在这个应用程序中，我有一个简单的翻译功能。用户可以通过 select 更改语言，UI 会使用从 json 文件中获取的标签进行更新。在这里我遇到了这个问题：

提交表单时，除了验证消息之外，所有标签都会更新为新语言。我认为这是标签组件未重新呈现的问题，但我不知道如何解决或修复它。

这是我为这个问题制作的测试应用程序代码来说明我的问题：

import React, { Component } from 'react';
import './App.css';
import { Form, Input, Button } from 'antd';

class App extends Component {
  state = {
    validationNameMessage: "Please input your name",
    validationPasswordMessage: "Please input your password",
  }


  onBtnClick = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      // here is a simulated "request" to my backend server to get translation
      setTimeout(() => this.setState({ validationNameMessage: "Podaj nazwe", validationPasswordMessage: "Podaj haslo" }), 2000)
    });
  }
  render() {
    const { getFieldDecorator } = this.props.form;

    return (
      <div className="App">
        <div className="form-container">
          <Form name="test-form">
            <Form.Item label="Name">
              {getFieldDecorator("name", {
                rules: [
                  {
                    required: true,
                    message: this.state.validationNameMessage
                  }
                ]
              })(<Input />)}
            </Form.Item>
            <Form.Item style={{ marginTop: 12 }} label="Password">
              {getFieldDecorator("password", {
                rules: [
                  {
                    required: true,
                    message: this.state.validationPasswordMessage
                  }
                ]
              })(<Input />)}
            </Form.Item>
            <Form.Item>
              <Button onClick={this.onBtnClick} style={{ marginTop: 12 }} type="primary" htmlType="submit">
                Submit
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>
    );
  }
}
export default Form.create({ name: 'test-form' })(App);

Answer 1

您提供的示例的问题是未翻译的验证在翻译到达之前已经呈现，因此，只有在翻译到达后重新触发验证时才会显示。

一种可能的解决方案是使用Form API 中的setFields 方法。您可以在将它们设置为状态后立即触发翻译的验证，如下所示：

 this.setState(
          {
            validationNameMessage: "Podaj nazwe",
            validationPasswordMessage: "Podaj haslo"
          },
          //callback that triggers after the state has been updated
          () => {
            this.props.form.setFields({
              name: {
                value: values.name,
                errors: [
                  // only show the validation error if there is no value in the field
                  ...(values.name
                    ? []
                    : [new Error(this.state.validationNameMessage)])
                ]
              },
              password: {
                value: values.password,
                errors: [
                  ...(values.name
                    ? []
                    : [new Error(this.state.validationPasswordMessage)])
                ]
              }
            });
          }
        );

这仍会在短时间内（在您的示例中为 2 秒）闪烁未翻译的验证，但会在它们到达后立即切换到已翻译的验证。

Here is a sandbox demonstrating the suggested solution with the example you provided.