需要帮助解决React Typescript错误

Question

我试图将非TS React组件转换为使用Typescript.在这个组件中,我收到此错误:

类'Component'定义实例成员函数'componentWillMount',但扩展类'Root'将其定义为实例成员属性.

这是我的组件:

import * as React from "react";
import { render } from "react-dom";
import { BrowserRouter as Router } from "react-router-dom";
import { Provider } from "react-redux";


import createStore from "./state";
import { getCurrentUser } from "./util";
import { setValidUser } from "./state/actions/auth-actions";
const { store } = createStore();

class Root extends React.Component<any> {

  componentWillMount = async () => {
    const currentUser = await getCurrentUser();

    if (currentUser) {
      store.dispatch(setValidUser(currentUser));
    }
  }

  render() {
    return (
      <Provider store={store}>
          <Router>
            {this.props.children}
          </Router>
      </Provider>
    );
  }
}

export default (Component, props = {}) => {
  render(
    <Root>
      <Component {...props} />
    </Root>,
    document.getElementById("root"),
  );
};

我不是TS的专业人士,显而易见,并且不确定如何解决这个问题.谢谢!

Answer 1

类'Component'定义实例成员函数'componentWillMount',但扩展类'Root'将其定义为实例成员属性.

改变你的财产:

componentWillMount = async () => {

成员函数:

async componentWillMount() {

这些名称来自OO概念

更多

我甚至会:

 componentWillMount() {
    this.asyncMount();
 }

 asyncMount = async () => {
    const currentUser = await getCurrentUser();

    if (currentUser) {
      store.dispatch(setValidUser(currentUser));
    }
  }

由于React不会等待您componentWillMount的等待,其异步性质可能会让您的开发人员感到困惑.