需要帮助解决React Typescript错误

Question

我正在尝试将非TS React组件转换为使用Typescript。 在这个组件中，我收到了这个错误：

  

Class'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

  

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

更改您的财产：

componentWillMount = async () => {

到成员函数：

async componentWillMount() {

这些名称come from OO concepts

更多

我甚至会：

 componentWillMount() {
    this.asyncMount();
 }

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

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

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