Question

我有此代码

class ConnectedApp extends Component {

  constructor(props) {
    super();
    props.initConfig(); // the ajax call that populate the user settings
  }

  render() {

    return (
      <I18nextProvider i18n={i18n}>
        <Router>
          <div className="App" style={appStyle}>
            <Head/>
            <div className="Container">
              <Container/>
            </div>
            <Foot/>
            <Loading/>
            <ToastContainer position="bottom-right" />
          </div>
        </Router>
      </I18nextProvider>
    );
  }
}

现在的问题是initconfig是中间件中的ajax函数。在为登录用户呈现应用程序之前，我需要等待功能完成。有人有什么建议吗？

实际上，该应用程序在首次登录时工作正常，会给出错误消息，该错误可以通过手动刷新解决。

Answer 1

您需要在此处进行一些更改–首先，您将需要某种方式来指示加载。可以在全局或局部状态下使用布尔值以最简单的形式完成此操作。您还应该将AJAX调用方法移至相应的组件生命周期方法componentDidMount中。

您希望它在componentDidMount中，以确保已安装组件并准备接收道具或状态更改。

class ConnectedApp extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.props.initConfig();
  }

  render() {
    if (this.props.loading === true) {
      return null // this will render nothing until loading is `false`
    }

    return (
      <I18nextProvider i18n={i18n}>
        <Router>
          <div className="App" style={appStyle}>
            <Head/>
            <div className="Container">
              <Container/>
            </div>
            <Foot/>
            <Loading/>
            <ToastContainer position="bottom-right" />
          </div>
        </Router>
      </I18nextProvider>
    );
  }
}

在您的redux状态下，您需要为加载状态设置一个属性。启动请求时，将加载设置为true，成功后将其设置为false。如果失败，除了简单的“加载”布尔值之外，您需要一个更具扩展性的解决方案来解决该问题。

此外，如果您还没有签出新的React Hooks API，那么您的组件将使用该外观。

import React, { useEffect } from "react";

const ConnectedApp = ({ initConfig, loading }) => {
  useEffect(() => {
    initConfig() // this will only get called when the component mounts. Same as `componentDidMount`
  }, [])

  if (loading === true) {
    return null // this will render nothing until loading is `false`
  }

  return (
    <I18nextProvider i18n={i18n}>
      <Router>
        <div className="App" style={appStyle}>
          <Head/>
          <div className="Container">
            <Container/>
          </div>
          <Foot/>
          <Loading/>
          <ToastContainer position="bottom-right" />
        </div>
      </Router>
    </I18nextProvider>
  );
}

如何等待初始化配置完成？

1 个答案: