Question

正在按照本教程制作一个简单的待办事项应用程序（https://hackernoon.com/create-a-simple-todo-app-in-react-9bd29054566b）。

我遇到此错误：

TypeError: _this is undefined

参考以下组件中使用onClick删除的时间：

import React, {Component} from 'react'

class TodoItems extends Component {

    createTasks(item) {
        return (
            <li key={item.key} onClick={() => this.props.deleteItem(item.key)}>
                {item.text}
            </li>
        )
    }
    render() {
        const todoEntries = this.props.entries
        const listItems = todoEntries.map(this.createTasks)

        return <ul className="theList">{listItems}</ul>
    }
}

export default TodoItems

我已经看到我可能必须在构造函数中使用.bind（this），但我不太确定如何在此处应用它。

这是App.js的一段，其中定义了deleteItem并称为TodoItems：

    deleteItem = key => {
        const filteredItems = this.state.items.filter(item => {
            return item.key !== key
        })
        this.setState({
            items: filteredItems,
        })
    }
    inputElement = React.createRef()
    render() {
    return (
        <div className="App">
            <TodoList
                addItem={this.addItem}
                inputElement={this.inputElement}
                handleInput={this.handleInput}
                currentItem={this.state.currentItem}
            />
            <TodoItems entries={this.state.items} deleteItem={this.deleteItem}/>
        </div> //App
    )
  }

在此先感谢您的帮助！

Answer 1

如果你不知道为什么...

类声明和类表达式的主体以严格模式执行，即构造函数，静态方法和原型方法。 Getter和setter函数在严格模式下执行。

在React的类组件中，当我们将事件处理函数的引用作为回调传递时，

<button type="button" onClick={this.handleClick}>Click Me</button>

点击我事件处理程序方法将失去其隐式绑定的上下文。当事件发生并调用处理程序时，此值将返回默认绑定，并设置为undefined，因为类声明和原型方法以严格模式运行。

当将事件处理程序的this绑定到构造函数中的组件实例时，我们可以将其作为回调传递，而不必担心会丢失其上下文。

箭头函数不受此行为的影响，因为它们使用词汇表this绑定，该绑定会自动将它们绑定到定义它们的作用域。

This is why we need to bind event handlers in Class Components in React

Class MDN

Answer 2

this.createTasks方法用作回调。为了使用this，应该绑定到适当的上下文。

它应该是：

createTasks = (item) => {...}

或

createTasks = this.createTasks.bind(this);

createTasks(item) {...}

Answer 3

constructor(){
  this.createTasks = this.createTasks.bind(this);
}

您可以使用具有正确Babel配置的ES6使其变得更简单，并省去constructor()周期。遵循此tutorial.

Answer 4

您可以使用粗箭头功能

deleteItem={()=>{this.deleteItem()}}

在ES6中支持。

OR

您也可以在构造函数中.bind（this）。

例如。

constructor(props){
    super(props);
    this.deleteItem = this.deleteItem.bind(this)
}

我该如何在React中解决“ _this is undefined”？

4 个答案: