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

编程问答 2022-08-15

问题描述

我有一个使用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",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);

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

antdformsjavascriptreactjsreactjs