时间戳

首页 > 解决方案 > 反应直到第二次请求才返回最新状态

reactjs - 反应直到第二次请求才返回最新状态

问题描述

我在表单组件中有以下方法：

validateForm () {
    this.setState({isValid: true});
    this.formFields.forEach(field => {
        let isValid = field.ref.current.validateField();
        console.log('Field isValid?', isValid);
        if (!isValid) {
            this.setState({isValid: false});
        }
        console.log('Form isValid?', this.state.isValid);
    });
    return this.state.isValid;
}

当它被调用时，它将表单状态设置isValid为true。然后循环遍历我们存储在 中的子组件formFields并找出其中是否有任何无效，此时如果有任何返回无效响应，它将标记表单无效。

使用控制台日志，我发现表单的状态始终是以前的状态console.log('Form isValid?', this.state.isValid);，直到我再次调用该方法，然后它返回正确的状态值......

我在 Rails 的 ActiveRecord 中看到过类似的情况，您需要调用reload模型以确保由于缓存而获得最新状态...... React 有类似的东西吗？

标签： reactjs

解决方案

validateForm () {
    let valid = true
    this.formFields.forEach(field => {
        let isValid = field.ref.current.validateField();
        if (!isValid) {
            valid = false;
        } 
    });
    if (!valid) {
        this.setState({isValid: false});
    }
    return valid;
}

使用此代码。

setState()是异步的。因此它不会在调用 setState() 后立即更改其值。它只会在下一次渲染时改变它的值

推荐阅读