时间戳

首页 > 解决方案 > 提交表单数据时出现错误

reactjs - 提交表单数据时出现错误

问题描述

我创建了一个表单，antd并希望将数据提交到我的数据库，我创建了以下函数

 handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
        this.setState({
          data:values
        })
        console.log('this is i ', this.state.data);
      }
    });
  }

当我从表单提交数据时，数据存储在名为values. 当我第一次提交表格时。如图所示，它在控制台中显示以下内容 。当我再次单击提交时，数据将传递到第二个控制台，如图所示。我能知道我哪里错了吗

标签： reactjsrestantd

解决方案

你没有做错任何事。console.log(this.state)这实际上是您在调用后尝试立即执行的预期行为。this.setState({})此逻辑几乎同时发生，因此您将无法立即打印新的状态数据。

如果您想使用新的状态数据执行操作，您可以使用可选的第二个参数，this.setState({})其中实际上是一个回调。它可以访问您的新状态数据。见下文：

handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
        this.setState({
          data:values
        }, () => console.log(this.state.data))
      }
    });
  }

推荐阅读