未处理的拒绝（TypeError）：无法读取未定义的属性（读取“setState”）答案

【问题标题】：Unhandled Rejection (TypeError): Cannot read properties of undefined (reading 'setState')未处理的拒绝（TypeError）：无法读取未定义的属性（读取“setState”）
【发布时间】：2021-11-15 01:58:09
【问题描述】：

为什么我会出现这个错误？ 未处理的拒绝（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>
    );
  }

}

错误图片

请忽略此消息，因为我可以在这里发布问题，谢谢。

【问题讨论】：

@CherryDT 你是什么意思？
@CherryDT 就这样？ (res => this.setState(this.state))?
我得到同样的错误
Unhandled Rejection (Error): setState(...): takes an object of state variables to update or a function which returns an object of state variables.
请不要改变问题的用途。应该解决旧问题（如果您愿意，可以接受我的回答）并创建一个新问题。我正在恢复您的编辑。谢谢

标签： javascript reactjs

【解决方案1】：

您当前使用常规函数作为addDepartment(...).then 的回调，该函数将拥有自己的this（在本例中为undefined，因为调用者没有绑定任何东西）。使用没有自己的this 的箭头函数。将function (res) 更改为res =>：

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

【讨论】：