在获取所有信息之前，如何阻止要渲染的React组件？

小编典典

在获取所有信息之前，如何阻止要渲染的React组件？

reactjs

在渲染我的组件之前，我需要获取一些信息。该信息将由API提供，并通过ajax调用获取。

我只是想在渲染组件之前等待10秒钟，但是它说：

Uncaught Invariant Violation: Login.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

兑现承诺后，我可以渲染我的组件吗？

/** Page Login */
class Login extends React.Component {

  /**
   * @constructor
   * @param {object} props La fonction super() appelle le parent pour y transmettre ses propriétés
   */
  constructor(props) {
    super(props);

    this.handleFormSubmit = this.handleFormSubmit.bind(this);
  }

  /**
   * Reçoit les valeurs des formulaires
   */
  handleFormSubmit(data) {
    const { dispatch } = this.props;

    dispatch(fetchLoginAuth(data));
  }

  normalRender() {
    return (
      <div id="login-page">
        <div className="container-fluid">
          <div className="row">
            <div className="col-md-2">
              <Link to="/" className="home-link"><img src={BASE_URL + '/assets/img/logo.svg'} alt="Logo" /></Link>
            </div>
          </div>
          <div className="row">
            <div className="col-lg-4 col-lg-offset-4">
              <h1><FormattedMessage {...messages.loginPageTitle} /></h1>
            </div>
          </div>
          {React.cloneElement(this.props.children || <div />, { onSubmit: this.handleFormSubmit, login: this.props.login })}
        </div>
      </div>
    );
  }

  /**
   * Render le component - ReactTransitionGroup
   * @return {JSX} Rend la page Registration
   */
  render() {
    setTimeout(this.normalRender, 10000);
  }
}

我将ES6与JSX，redux（带有react-router的通用路由器）一起使用。

非常感谢您的帮助！

阅读 299

2020-07-22

共1个答案

小编典典

这是我通常做的事情：

class Login extends React.Component {
    constructor(props) {
        //IMPLEMENT OTHER JUNK HERE
        this.state = {
            data: null //This is what our data will eventually be loaded into
        };
    }
    componentDidMount() {
        this.loadData();
    }
    loadData() {
        /*LOAD DATA, INSERT BELOW LINE IN CALLBACK FUNCTION
            this.setState({
                data: //LOADED DATA
            });
        */
    }
    render() {
        if (!this.state.data) {
            return <div />
        }

        //WE HAVE DATA, DO A NORMAL RENDER
        return (
            <div id="login-page">
                <div className="container-fluid">
                    <div className="row">
                        <div className="col-md-2">
                            <Link to="/" className="home-link"><img src={BASE_URL + '/assets/img/logo.svg'} alt="Logo" /></Link>
                        </div>
                    </div>
                    <div className="row">
                        <div className="col-lg-4 col-lg-offset-4">
                            <h1><FormattedMessage {...messages.loginPageTitle} /></h1>
                        </div>
                    </div>
                    {React.cloneElement(this.props.children || <div />, { onSubmit: this.handleFormSubmit, login: this.props.login })}
                </div>
            </div>
        );
    }
}

这是将要发生的事情的细分…

组件即将加载
触发componentDidMount（）并运行loadData（）
loadData（）启动ajax请求，在ajax请求返回数据之前返回，因为我们喜欢异步数据加载
render（）运行。由于this.state.datais null，我们进入了if块，并<div />返回了。
Ajax数据加载完成，并进行了this.setState()调用，这将强制重新渲染。
render（）再次运行。由于this.state.data现在包含一个值，因此我们跳过if块并呈现常规内容。

编辑（2019年10月11日）：将componentWillMount（）迁移到componentDidMount（）

2020-07-22