React 组件道具比我的验证功能落后一步

Question

我编写了一个验证函数，可以在输入更改时验证用户输入。我还创建了一个<Input/> 组件并集成了错误消息<div>。所以我想在出现错误时将字符串传递给<Input/> 组件上的“消息”道具，并且我希望组件内的<div> 呈现错误消息。
现在我确定我的验证功能工作得很好。但似乎“消息”道具（或整个组件）总是落后于新的验证状态。
代码如下：

import React, { Component } from "react";
import Input from "../common/Input";
import Validator from "../../lib/validator/validator";

class Login extends Component {
  constructor(props) {
    super(props);

      this.state = {
        phoneNo: '',
        password: ''
      };

    this.handleChange = this.handleChange.bind(this);
    this.validator = new Validator(rules);
    this.validation = this.validator.validate(this.state);

  }
}

  render() {
return (
  <div className="container d-flex justify-content-center align-items-center full-height">
    <form className="form-container d-flex flex-column justify-content-center align-items-center">
      <div className="title-container d-flex justify-content-center align-items-center">
        <h3 className="spacing">ورود</h3>
      </div>

      <Input type="text" value={this.state.phoneNo} name="phoneNo"
        onChange={this.handleChange} message={this.validation.phoneNo.message}/>

      <Input type="password" value={this.state.password} name="password" 
        onChange={this.handleChange} message={this.validation.password.message}/>

      <Button styleClass="btn btn-primary" type="button" 
        onClick={this.handleSubmit} disabled={!this.validation.isValid}/>

    </form>
  </div>
)
}
  handleChange(e) {
    const name = e.target.name;
    const value = e.target.value;
    this.setState({
      [name]: value
    }, () => {
      this.validation = this.validator.validate(this.state);
      console.log('this validation', this.validation.isValid);
    });
  }

this.validation = this.validator.validate(this.state); 是一个变量，其中包含验证函数返回的对象（包含验证结果）。此变量的属性在“消息”属性中使用。
如您所见，状态在验证之前已更新。
问题是，只要字段有效，console.log('this validation', this.validation.isValid) 就会记录正确的结果。但是视图仍然显示错误消息（来自<Input/> 组件）。它总是比表单的正确状态落后一步。

由于我是 react 新手（我曾经使用 Angular），因此我可能犯了一个错误。有什么想法吗？？

感谢阅读...

Answer 1

你的组件只会在它的状态改变时渲染；当您执行 setState 时，它​​将呈现，但是此时您尚未更新验证。然后，当您运行验证器检查时，它不会再次重新渲染。

因此，您获得了具有正确 [name]: 值数据的渲染，但验证器（在重新渲染时）仍保持原样。

在 setState 之前添加验证检查，并将验证结果也存储在状态中。然后当调用 setState 时，重新渲染会显示正确的信息。