Question

我正在渲染从Firebase检索的项目列表。对于每个项目，我都会渲染一个div，其中包括一个删除该项目的按钮。

相关代码：

constructor(props){
    // Pass props to parent class
    super(props);

    this.removeItem = this.removeItem.bind(this);
    this.getList = this.getList.bind(this); 
    ...
}

removeItem(key) {
    this.ref(key).remove()
}

getList() {
    var list = []
    this.ref.on("value", function (snapshot) {
        for (var key in snapshot.val()) {
            list.push(<div class="todo-item">{snapshot.val()[key]} <button onClick={() => this.removeItem(key)}> X </button> </div>)
        }
    }, function (error) {
        console.log("Error: " + error.code);
    });
    return(list)
}

render() {
    return (
        <div class="todolist">
            .....
            {this.getList()}
        </div>
    )
}

项目列表及其删除按钮可以很好地呈现。但是，单击“删除”按钮时，我得到一个TypeError: Cannot read property 'removeItem' of null

由于removeItem是this的函数，所以我假设this的绑定不正确，因此null。

但是，我在构造函数中同时绑定了函数removeItem和getList。

有人知道我要去哪里了吗？

Answer 1

这是从匿名函数访问context时丢失this的最常见问题。

要解决这个问题，

使用箭头功能：

this.ref.on("value", (snapshot) => { ... }, (error) => { ... });

OR
使用bind(this)

this.ref.on("value", function (snapshot) { ... }.bind(this), function (error) { ... }.bind(this));

无法在onClick中读取“ someFunction”的null属性“ someFunction”

1 个答案: