1

我想用具有添加、更新、删除操作的表创建组件。但是当我尝试向数组添加一些测试元素时，我得到了这个错误

未捕获的 TypeError：this.documents 在 HTMLButtonElement.addNewDocument 处不可迭代

这是简单的代码，但我无法确定错误在哪里。

@State()
documents: string[] = [];

addNewDocument() {
 this.documents= [... this.documents, "test2"];
}

render() {

   return (
      <Host>
          <button onClick={this.addNewDocument} type="button" class="btn btn-success">
            <i class="fa fa-plus"></i>
            <span class="btn-text">add new</span>
          </button>

          {this.documents && this.documents.length ? (

            <div>

              <table>
                <thead>
                  <tr>
                    <th>Name</th>
                  </tr>
                </thead>
                <tbody>
                  {this.documents.map(document => (
                    <tr>
                      <td>{document}</td>
                    </tr>
                  ))}
                </tbody>
              </table>

            </div>
          ) : (
            <div>Loading...</div>
          )}

        </div>
      </Host>
    );
  }
4

1 回答 1

0

问题在于上下文（即 的值this）。

由于您附加事件处理程序 ( onClick={this.addNewDocument}) 的方式，其中的this关键字addNewDocument将引用按钮元素，而不是您的组件实例。

基本上它相当于button.addEventListener(function() { this.documents = [ ...this.documents, "test2"] }which 会抛出相同的错误。

有两种方法可以防止这种情况：

1.箭头功能

箭头函数从父函数继承上下文：

<button onClick={() => this.addNewDocument()}></button>

2.绑定

您可以使用手动设置上下文.bind()。

<button onClick={this.addNewDocument.bind(this)}></button>
于 2021-11-26T08:30:08.553 回答