开发者问题收集

未处理的拒绝(TypeError):无法读取未定义的属性(读取‘setState’)

2021-09-21
5964

为什么我会遇到此错误? 未处理的拒绝(TypeError):无法读取未定义的属性(读取“setState”) ?这是因为 addDepartment 中没有检测到它 它无法理解这是 CustomToolbar 组件?请帮忙。

class CustomToolbar extends React.Component {
  //

  constructor(props) {
    super(props)
    this.HandleAdd = this.HandleAdd.bind(this);
    }
  HandleAdd = () => {
  Swal.fire({
    title: 'Add Department',
    text: "Input department name below.",
    showCancelButton: true,
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: 'Save',
    html: generateInputForms({
      strname: '',
      intsequence: ''
    }),

    preConfirm: () => {
      let strname = document.getElementById('strname').value;
      let intsequence = document.getElementById('intsequence').value;
 
      if (!strname) {
        Swal.showValidationMessage('The Department field is required.')
      }
      if (!intsequence) {
        Swal.showValidationMessage('The Sequence field is required.')
      }
      return {
        strname: document.getElementById('strname').value,
        intsequence: document.getElementById('intsequence').value
      }
    }
  }).then((result) => {
    if (result.isConfirmed) {
      let request = {
        strresourcename: "Richard",
        strapplicationcode: "SchoolApp",
        strmodulename: "Department",
        strtablename: "fmDepartments",
        strfieldid: "fmDepartmentsId",
        strname:document.getElementById('strname').value,
        intsequence:document.getElementById('intsequence').value
      }
      addDepartment(request).then(function(res){
        if (res.status == 200){
          Swal.fire({
            icon: 'success',
            title: 'Department',
            text: 'New Department has been added successfully.',
          }).then((res) => this.setState(Department))
        }else{
          Swal.fire({
            icon: 'error',
            title: 'Oops',
            text: 'Something went wrong.',
          })
        }
      })
    }
  })
}
  render() {
    const { classes } = this.props;

    return (
      <React.Fragment>
        <Tooltip title={"Add"}>
            <Button
              variant="contained"
              color="primary"
              size="small"
              style={{
                textTransform: 'unset',
                outline: 'none',
                marginLeft: 20,
                backgroundColor: '#00B029',
              }}
              onClick={this.HandleAdd}
              className={classes.button}
              startIcon={<AddIcon className={classes.addIcon} style={{color: '#fff',}} />}
            >
              Add
            </Button>
        </Tooltip>
      </React.Fragment>
    );
  }

}

错误图片

在此处输入图片描述

Please ignore this meesage because so I can post a question here, thanks.

1个回答

您当前使用常规函数作为 addDepartment(...).then 的回调,该函数将具有自己的 this (在本例中为 undefined ,因为调用者未绑定任何内容)。请改用没有自己的 this 的箭头函数。将 function (res) 更改为 res => :

addDepartment(request).then(res => {
  // ...
})

有关更多详细信息,请参阅 “箭头函数”和“函数”是否等效/可互换?

CherryDT
2021-09-21