javascript – 我可以将ajax放在React组件构造函数中吗？

class AjaxInConstructor extends React.Component{
    constructor() {
        super();
        this.state = {name: '',age: ''}
        this.loadData().then(data => {
            this.setState(data);
        });
    }
    loadData() {
        return new Promise((resolve,reject) => {
            setTimeout(() => {
                resolve({
                    name: '我去去去去nimabi',age: 123
                });
            },2000);
        });
    }
    render() {
        const {name,age} = this.state;
        return <div>
            <p>Can I init component state async?</p>
            <p>name: {name}</p>
            <p>age: {age}</p>
        </div>
    }
}

ReactDOM.render(
  <AjaxInConstructor/>,document.body
)

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

以上是我的演示代码.我知道人们总是把ajax放在componentDidMount或componentwillMount生命周期中.

但这种情况也有效.

在Chrome控制台中,React不会抛出任何错误和警告.那么,我的问题是这样的用法是完全正确的吗？有错误吗？

解决方法

您可以在任何地方进行AJAX调用.在构造函数中进行AJAX调用没有“错误”,但有一个问题.您只想在安装组件之后或即将安装组件之前进行AJAX调用.

因此,在呈现组件之前,建议在componentDidMount()或componentwillMount()中进行AJAX调用.仅仅因为React允许做“事情”并不意味着你应该做到！