为什么我们不能在有状态组件中使用UseDispatch?

时间:2019-10-31 12:19:46

标签: reactjs react-redux

为什么我们不能在有状态组件中使用Hook UseDispatch?

import { useDispatch } from "react-redux";
import { submitData } from "../state/actions";

class FormComponent extends Component {
  constructor(props) {
    super(props);
     this.state = {
       fields: {},
       errors: {}
     };
  }

 submitForm = e => {
    e.preventDefault();
    if (this.validateForm()) {
      useDispatch(submitData(this.state.fields));
    }
  };
}

}

我为带有字段的简单表单创建了有状态组件,并且还跟踪了state.fields中的所有数据,我想使用Hook方法UseDispatch。 为什么我不能在其中使用Hook?

1 个答案:

答案 0 :(得分:3)

使用有状态组件(从React.Component或PureComponent继承的类)时,不能使用UseDispatch挂钩或任何挂钩。

正如Dupocas所说,钩子仅在function components中可用。

相反,您需要使用.log中的connect实用程序将组件连接到redux存储:

---
output:
  pdf_document:
    keep_tex: true

header-includes:
- \usepackage{fancyhdr}
- \pagestyle{fancy}
- \fancyfoot{}
- \fancyhead{}
- \renewcommand{\headrulewidth}{0pt}    
- \geometry{head=75pt, includehead=true, includefoot=true}

---

... (some chunks of code go here)

\fancyhead[L]{\includegraphics[width=4cm]{example-image-duck}}
\fancyfoot[R]{Page \thepage\ of \pageref{LastPage} \\ \today}
\fancyfoot[L]{Identification Report \\ User generating the report: }

\vspace*{1\baselineskip}

# IDENTIFICATION REPORT

(some more LaTex and code chunks follow, including bar plots and KableExtra tables)

...

documentation for mapStateToProps