在 componentDidMount 的承诺中使用 setState 后，React 不会重新呈现

Question

这是代码

componentDidMount: function () {
        var self = this,
            templates;
        new Promise(function (resolve, reject) {
            API.getTemplates(function (err, result) {
                if (!err) {
                    templates = result.templates;
                    resolve();
                }
            });
        }).then(function () {
            return new Promise(function (resolve, reject) {
                _.map(templates,function (template) {
                    console.log("template.companyId " +template.companyId);
                    API.getCompanyById(template.companyId, function (err, result) {
                        if (!err) {
                            template.userId = result.company.userId;
                            resolve();
                        }
                    })
                });
            });
        }).then(function(){
            console.log("templates");
            console.log(templates);
            self.setState({templates: templates});
        });

    },

在 chrome React 工具中状态是正确的。在渲染方法中调用 this.state.templates。但是默认为null

getInitialState: function () {
    return {templates: null}
},

看起来 rerender 没有在 setState 执行后调用。另外，如果我们走另一条路，这个组件中的状态将不会保存，它将是 template:null

Answer 1

问题在于在遍历数组内部做出承诺，因此如果一个请求完成，方法就会执行。因此，我做出了一系列承诺，等待每个人都成功。这是解决方案

componentDidMount: function () {
        var self = this,
            templates;
        new Promise(function (resolve, reject) {
            API.getTemplates(function (err, result) {
                if (!err) {
                    templates = result.templates;
                    resolve();
                }
            });
        }).then(function () {
            /* for every template find his userId*/
            let copyTemplate = templates;
            let promises = [];
            for (let i = 0; i < templates.length; i++) {
                promises.push(new Promise(function (resolve, reject) {
                        API.getCompanyById(templates[i].companyId, function (err, result) {
                            if (!err) {
                                copyTemplate[i].userId = result.company.userId;
                                resolve();
                            }
                        })
                    })
                );
            }

            console.log(copyTemplate);
            templates = copyTemplate;
            return Promise.all(promises);
        }).then(function () {
            console.log("templates");
            console.log(templates);
            self.setState({templates: templates});
        });

    },

在 componentDidMount 的承诺中使用 setState 后，React 不会重新呈现

React does not rerender after setState used in promise in componentDidMount

promise

setstate

reactjs