对于此特定代码,如何设置状态并立即在函数中使用该状态

时间:2019-08-29 14:12:45

标签: javascript reactjs

我需要一个Submit按钮来更新this.state.FormStatus。我将使用此状态保存到SP列表。但是我是一个菜鸟,并且遇到了众所周知的过时状态问题。我了解我需要将回调传递给setState。但是我不知道我的代码如何。

我已经尝试过了:

但是语法错误。

private _onSubmit() {
    this.setState(function(prevState, props) {
      return {
      FormStatus: prevState.FormStatus: 'Submitted',
      SubmittedLblVis: !prevState.SubmittedLblVistrue,
      };
  });

这是其余的提交,我已经更正了上面的代码,这可能有助于清除问题:

 private _onSubmit() {
    this.setState(prevState =>({
      FormStatus: 'Submitted',
      SubmittedLblVis: true,
  }));
      pnp.sp.web.lists.getByTitle("JobEvaluationItems").items.add({

        JobTitle: this.state.JobTitle,
        Faculty: this.state.Faculty,
        Department: this.state.SelectedDept,
        SubDepartment: this.state.SubDepartment,
        DeptContactId: this.state.DeptContact,
        FormStatus: this.state.FormStatus

如您在上面代码的最后一行所看到的,我正在尝试使用最新的this.state.FormStatus更新SP列表。 我希望“提交”按钮将“已提交”添加到this.state.FormStatus

1 个答案:

答案 0 :(得分:1)

您以错误的方式更新了state。要读取新状态,您可以使用setState中的第二个参数,该参数为您提供callback,仅在完成所有状态更新后才能执行

private _onSubmit() {
    this.setState( prevState =>({
         FormStatus: 'Submitted',
         SubmittedLblVis: !prevState.SubmittedLblVistrue,
      })
    }, () => console.log('Accessing the current state: ' + this.state.FormStatus));
}