时间戳

首页 > 解决方案 > 在 React 中再次调用函数的最佳方式

php - 在 React 中再次调用函数的最佳方式

问题描述

我是 React 的新手，我正在尝试使用一个函数来修复日期的输入。基本上，如果缺少日期，我将使其默认为“9999-12-31”，以便我的 PHP 后端更容易将其插入数据库。保存表单时，它调用 validateInputs 函数，该函数更正丢失的日期，然后调用 onSave 函数。如果我这样做：

    validateInputs: function(e) {
        if (!this.state.expire_date || this.state.expire_date == '') {
            this.setState({ expire_date: '9999-12-31' });
        }
        this.onSave(e);
    },

它将在字段本身中设置日期并且无法保存。

但如果我这样做：

    validateInputs: function(e) {
        if (!this.state.expire_date || this.state.expire_date == '') {
            this.setState({ expire_date: '9999-12-31' });
            this.validateInputs(e);
        }
        this.onSave(e);
    },

它会保存，但我会收到一个控制台错误，说已超出最大调用堆栈。我知道这可能与我对如何渲染组件和管理状态的理解有关，但我对 React 还不够好，无法弄清楚更多。

标签： phpreactjs

解决方案

setState是异步的，这意味着组件状态不会在下一行代码中立即更新，您只能在下一个渲染周期中看到新状态，或者在回调中作为setState.

因此，您可能希望将函数更新为以下内容：

validateInputs: function(e) {
    if (!this.state.expire_date || this.state.expire_date == '') {
        this.setState({ expire_date: '9999-12-31' }, () => {
            // NOTE: async code - e is nullified
            this.validateInputs(e);
        });
    } else {
        this.onSave(e);
    }
},

但是，请注意React 事件是 pooled的，这意味着您无法在异步代码中访问事件对象的值

推荐阅读