Question

我找不到与地雷相关的情况，但是我的问题是常见错误TypeError: Cannot read property 'props' of undefined。

奇怪的是，此错误仅发生在我在render()上面定义的方法中。

在render()内，我仍然可以无错误地访问。 React开发工具显示我什至可以使用道具。

以下代码：

import { Route } from 'react-router-dom'
import AuthService from '../../utils/authentication/AuthService'
import withAuth from '../../utils/authentication/withAuth'

const Auth = new AuthService()

class HomePage extends Component {

    handleLogout() {
        Auth.logout()
        this.props.history.replace('/login')
    }

    render() {
        console.log(this.props.history)
        return (
            <div>
                <div className="App-header">
                    <h2>Welcome {this.props.user.userId}</h2>
                </div>
                <p className="App-intro">
                    <button type="button" className="form-submit" onClick={this.handleLogout}>Logout</button>
                </p>
            </div>
        )
    }
}

export default withAuth(HomePage)

编辑：道歉。我也不想引起混乱，因此我要补充一点，我也使用@babel/plugin-proposal-class-properties来避免this的绑定。

Answer 1

这是因为您的方法handleLogout具有自己的上下文。为了将类的this值传递给您的方法，必须执行以下两项操作之一：

1）将其绑定到类的构造函数中：

constructor(props) {
  super(props)
  this.handleLogout = this.handleLogout.bind(this)
}

2）您将handleLogout方法声明为箭头函数

handleLogout = () => {
  console.log(this.props)
}

Answer 2

我认为这不受非es6的限制。因此，您既可以将其与构造函数绑定，也可以摆脱es6类型的函数

handleLogout = () => {
    Auth.logout()
    this.props.history.replace('/login')
}

我无法尝试此操作，但您也可以执行

constructor(props) {
  super(props);
  // Don't call this.setState() here!

  this.handleLogOut= this.handleLogOut.bind(this);
}

Answer 3

您需要在点击处理程序上使用.bind。

<button type="button" className="form-submit" onClick={this.handleLogout.bind(this)}>Logout</button>

已传递React道具，但只有render（）会读取道具吗？

3 个答案: