Question

'Home'是一个基于xhr响应重定向的中间组件。我希望'Home'按照渲染/返回显示'Loading ...'，直到它收到xhr响应。

但令人惊讶的是，

1）我从来没有看到“正在加载......”，但我只看到重定向的页面。

2）更改假xhr请求的延迟没有影响，即我仍然得到＆lt; 5S

3）将componentWillMount()更改为componentDidMount()没有任何影响

4）如果我评论componentWillMount() { ... }，那么我会看到'正在加载'

你能帮我理解为什么吗？

xhr.js

const myData = {
    getData(cb) {
        setTimeout(cb(true), 25000); // fake async
    }
};

export default myData;

Home.js

"use strict";

import React from 'react';
import xhr from '../../utils/xhr';
import PropTypes from 'prop-types';
import {withRouter} from 'react-router-dom';


class Home extends React.Component {
    constructor(props) {
        super(props);
    }

    componentWillMount() {
        const {history} = this.props;
        xhr.getData((flag) => {
            flag ? history.push('/myData') : history.push('/welcome');
        });
    }

    render() {
        return (
            <div>Loading ...</div>
        );
    }

}

Home.propTypes = {
    history: PropTypes.object.isRequired
};

export default withRouter(Home);

Answer 1

您的代码应该可以正常使用componentDidUpdate，除了一件事，您没有正确运行setTimeout

示例：

＆＃13;

const getData = cb => {
  setTimeout(() => cb(false), 2500); // fake async
};

class Home extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      pageName: "Loading..."
    };
  }


  componentDidMount() {
    getData(flag => {
      flag
        ? this.setState({ pageName: "myData" })
        : this.setState({ pageName: "wellcome" });
    });
  }

  render() {
    return <div>{this.state.pageName}</div>;
  }
}

ReactDOM.render(<Home />, document.getElementById("root"));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

＆＃13;

<强>更新
如下所述，我应该解释为什么以及在哪里调用异步操作。

componentWillMount - 几乎与constructor相同在组件安装到DOM之前运行一次可以在异步操作完成之前调用render方法因此，在这种方法中进行异步操作并不理想。由方式，在DOCS中明确表示不使用此方法并使用改为constructor。
componentDidMpunt - 将在组件发布后立即调用安装到DOM，这是运行异步操作的理想方法在此方法中设置状态将触发重新渲染（其中正是上面例子中发生的事情）DOCS。

使用假的xhr请求和componentWillMount（）

1 个答案: