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。

当状态/属性更改时，Antd 3.26表单验证消息不会重新呈现新值

1 个答案: