Question

我刚刚启动了一个带有react的新应用程序，这次我正在使用Flow。

我在报告的错误方面遇到了一些问题，我认为这些错误都不是错误。这是我班上的问题：

'use strict';
// @flow

import {HashRouter, Route, Switch} from 'react-router-dom';
import React from 'react';
import {connect} from 'react-redux';
import axios from 'axios';
import Loader from './loader/Loader';
import Sidebar from './sidebar/Sidebar';
import Header from './header/Header';
import * as appActions from '../actions/appActions';



  type Props = {
    dispatch:  Function,
    loadingTxt:  string,
    errorTxt:  string,
    loading:  bool,
    error:    bool
  };


/**
* App Component.
*/
class App extends React.Component<Props> {
  constructor(props: Props) {
    super(props: Props);

    this.data = {};
  }

  componentDidMount() {
    axios.get(window.location.protocol + '//' + window.location.host + '/data/app.json')
      .then((response: object) => {
        this.data = response.data
        setTimeout(() => this.props.dispatch(appActions.appHasLoaded(): Function), 2000);

      }).catch(() => {
        this.props.dispatch(appActions.appHasErrored(): Function);
      });
  }

  render(): React.Element {
    if (this.props.error || this.props.loading) {
      return (
        <div className={this.props.error ? 'app-loader is--error' : 'app-loader'}>
          <Loader size="app" />
          <p className="app-loader__text">{this.props.error ? this.props.errorTxt : this.props.loadingTxt}</p>
        </div>
      )

    } else {
      return (
        <div className="app-inner">
          <HashRouter>
            <Route>
              <Header {...this.data.header} />
            </Route>
          </HashRouter>

          <div className="page">
            <HashRouter>
              <Switch>
                <Route path='/'>
                  <Sidebar {...this.data.sidebar} />
                </Route>
                <Route>
                  <p>Not Found</p>
                </Route>
              </Switch>
            </HashRouter>
          </div>
        </div>
      )
    }
  }
};

const mapStateToProps = (state: object) => {
  return {
    loading:  state.app.loading,
    error:    state.app.error
  }
}

export default connect(mapStateToProps)(App);

这些是错误：

>'dispatch' is missing in props validation    
  src/js/components/App.js:37:37
          setTimeout(() => this.props.dispatch(appActions.appHasLoaded(): Function), 2000); 'error' is missing in props validation       
  src/js/components/App.js:44:20
      if (this.props.error || this.props.loading) {
                      'loading' is missing in props validation     
  src/js/components/App.js:44:40
      if (this.props.error || this.props.loading) {
                                     'errorTxt' is missing in props validation    
  src/js/components/App.js:48:74
            <p className="app-loader__text">{this.props.error ? this.props.errorTxt : this.props.loadingTxt}</p> 'loadingTxt' is missing in props validation  src/js/components/App.js:48:96
            <p className="app-loader__text">{this.props.error ? this.props.errorTxt : this.props.loadingTxt}</p>

我不明白为什么它会将它们报告为错误，我定义了道具。每次我在渲染方法中使用道具时，我是否也禁止使用类型提示？它会让代码真的难以阅读！

Answer 1

如果您转到Flow文档HERE，您可以阅读

我们在这里导入React作为命名空间，导入*作为React from 'react'而不是默认导入React来自'react'。什么时候将React作为ES模块导入，您可以使用任一样式，但是通过导入作为命名空间，您可以访问React的实用程序类型。

这意味着如果您导入像import * as React from 'react'（而非import React from 'react'）之类的React，那么带有泛型的解决方案就可以正常工作。如果您希望将当前的import语句保留为react，请在类的顶部添加props: Props，并从类声明中删除Props generic语句，如下所示：

class App extends React.Component {
  props: Props
  // rest of the code

反应成分的流动误差

1 个答案: