无法做出路由使用反应获取错误，因为无法读取未定义的属性'props'

Question

嗨，我是一个新手反应我正在尝试的是从一个组件导航到另一个组件，为此我使用了以下逻辑class App extends Component {   getData(){     this.props.history.push('/test-data');   }   render() {     return (       <div>         <h1>ReactJS</h1>         <div >           <button  id="data" onClick={this.getData}>test data</button>           <button  id="con">test info</button>         </div>         <BrowserRouter>             <div>               <Route path="/test-data" component={TestData} />               <Route path="/test-info" component={TestInfo} />             </div>         </BrowserRouter>       </div>     )   }}当我尝试导航到页面时，我遇到了错误Cannot read property 'props' of undefined下面是我的stackblitz代码： - https://stackblitz.com/edit/react-xtshvq

Answer 1

您可以通过将以下代码添加到App类来修复错误：

constructor() {
  this.getData = this.getData.bind(this)}

问题是this关键字。在JavaScript中，它确实令人困惑并导致了这些问题。将函数传递this.getData给按钮组件时，它会尝试在按钮组件的范围内执行它，然后失败。

上面的代码做的是它基本上告诉函数使用传递的变量作为this函数内部。