This.props.history 未定义，如果从子组件调用[重复]

Posted 2023-02-22

【中文标题】This.props.history 未定义，如果从子组件调用[重复]

【英文标题】：This.props.history is undefined, if called from child component [duplicate]

【发布时间】：2018-08-18 00:15:50

【问题描述】：

我正在尝试从父组件内部验证答案。 validateAnswer 函数被触发并且几乎可以正常工作。

但如果网站经过验证，我想更改它。所以我从父母那里打电话给this.props.history.push。 这给了我一个错误，因为历史是未定义的。

<Answers handleClick=e => this.validateAnswer(e) />

//Function to validate the Answer in the parent
    validateAnswer = (event) => 
    if (true) 
      //navigate to /email
      this.props.history.push(
        pathname: '/email',
        state:  lastPage: 'question' ,
      );

    //Child component
         <Button
          name="1"
          label="Afrika"
          handleClick=props.handleClick
        />

我该如何解决这个问题？我应该直接在 Answer 组件中验证答案吗？

【问题讨论】：

在validateAnswer() 函数中记录this 会返回什么？

你试过使用 withRouter HoC 吗？

【参考方案1】：

试试这个：

<Answers handleClick=this.validateAnswer />

// Function to validate the Answer in the parent
validateAnswer(event)
if (true) 
  //navigate to /email
  this.props.history.push(
    pathname: '/email',
    state:  lastPage: 'question' ,
  );

// Child component
 <Button
  name="1"
  label="Afrika"
  handleClick=(e) => props.handleClick(e) 
/>

【讨论】：

我试过这样，但仍然得到完全相同的错误。