代码之家 › 专栏 › 技术社区 › J.Kennsy

无法从组件访问props字段

react-router reactjs javascript

J.Kennsy · 技术社区 · 6 年前

我是ReactJS新手,但我想创建一个简单的域,能够登录和注销。我将用户凭据存储在异步存储中。这是我的index.js:

..
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
..

class Index extends Component {

    render() {
        return (
            <Router>
                <Switch>
                    <Route path='/' exact component={Home}/>
                    <Route path='/login' component={Login}/>
                    <Route path='/welcome' component={Welcome}/>
                </Switch>
            </Router>
        );
    }

}

ReactDOM.render(<Index />, document.getElementById('root')); registerServiceWorker();

打开家页面,有一个按钮移动到登录页面:

<Button color="primary" onClick={() => {this.props.history.push("/login")}}>Sign In</Button>

登录组件包含窗体,该窗体在提交时调用给定方法:

this.props.history.push("/welcome");

欢迎光临 我有以下网页 :

class Welcome extends Component {

    handleLogout() {
        this.props.history.push("/");
    }

    render() {
        return (
            <div>
                <h1>Hello!</h1>
                <Button onClick={this.handleLogout}>Logout</Button>
            </div>
        );
    }
}

export default withRouter(Welcome);

我想说的是每一个组成部分( , 登录 , 欢迎光临 按钮在欢迎页面上,出现错误:

任何帮助都将不胜感激:)

4 回复 | 直到 6 年前

Nicholas Tower 6 年前

在javascript中,的值 this 这 在非严格模式下绑定到窗口对象,或在严格模式下未定义。你显然是在非严格模式下,所以 this.props.history.push 与 window.props.history.push . window.props 未定义,导致错误。

有几种方法可以解决此问题:

1) 在渲染中使用箭头函数。箭头函数的值与当他们被宣布的时候,所以 这 将等于你的部分

<Button onClick={(event) => this.handleLogout(event)}/>

这 已锁定。

class Welcome extends Component {
  constructor(props) {
    super(props);
    this.handleLogout = this.handleLogout.bind(this);
  }

  handleLogout() {
    this.props.history.push("/");
  }
  //etc
}

babel-plugin-transform-class-properties 插件,将handleLogout定义为箭头函数:

class Welcome extends Component {
  handleLogout = () => {
    this.props.history.push("/");
  }
  //etc
}

Geraint 6 年前

this 就是定义。你在定义 handleLogout 在组件的上下文中,但随后将其传递到另一个上下文并在其中执行。在这种情况下会有所不同,因此道具是未定义的。

实际上,如果要将函数传递到不同的上下文中(并且需要从例如,将函数绑定到组件版本所需的道具或状态 这

在组件的构造函数中:

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

或者使用箭头函数定义方法(这个“自动绑定”),但是这个方法还没有完全被认可,所以很可能需要一个babel polyfill:

handleLogout = () => { // function code }

Steve Archer 6 年前

这是人们在反应中遇到的一个非常常见的问题,您没有将适当的作用域传递给处理程序函数。因此,当调用handleLogout时,作用域(由“this”表示)不包括props。在将“this”传递给子组件之前,需要将其绑定到该处理程序函数。您可以在将函数赋予按钮时使用箭头函数(箭头函数自动向下传递作用域)来执行此操作:

<Button
    onClick={() => this.handleLogout()}
>
    Logout
</Button>

class Welcome extends Component {
    constructor(props) {
        super(props);
        this.handleLogout = this.handleLogout.bind(this);
    }

每当您在React中看到一个错误,表明没有定义props时,您应该首先检查“this”。(双关语!)

hossein dindar 6 年前

然后你就可以从 this.props