Question

我有一个具有以下功能的组件：

constructor(MyProps: Readonly<MyProps>){
    super(MyProps);
    this.state = {suppliers: [], supplierId:0, supplierName:''};
    this.addSupplier.bind(this);
  }

addSupplier(){
    const {supplierId} = this.state;
    alert('supplierId = ' + supplierId);
}

<Button onClick={this.addSupplier}>Add</Button>

状态已按预期方式初始化b / c this.state.supplierId绑定并按预期方式显示在加载组件的html输入中。 html输入中的onChange处理程序还会调用setState以按预期更新state.supplierId。但是，当触发addSupplier（）按钮时，会发生以下错误：

TypeError：无法读取未定义的属性“ supplierId”

因此由于某种原因，状态在此上下文中不可用。知道为什么会这样吗？

Answer 1

请使用箭头功能创建方法

addSupplier = () => {}

或在构造函数中使用以下语法

this.addSupplier = this.addSupplier.bind(this);

Answer 2

要进一步扩展Nikhil Goyal所发布的内容，导致出现错误的原因是因为在this的上下文中调用了该函数。非箭头函数在调用时而不是在声明时隐式绑定其上下文。因此，当您按下onClick组件上的Button时，它将在this.state.supplierId上下文中搜索Button。

为什么this.state在这种情况下不可用？

2 个答案: