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});
        });

    },

在铬反应工具中，状态是正确的。在render方法中调用this.state.templates。但默认情况下它为null

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

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

Answer 1

问题在于在迭代中使用数组进行promise，所以如果一个请求完成，则执行方法。因此，我做出一系列承诺，等待每个人都成功。这是解决方案

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中的promise中使用setState后，React不会重新渲染

1 个答案: