更改componentDidMount中的状态后，React组件不会更新

Question

我正在处理一个react组件，该组件使用来自服务器上API的一些数据来呈现表，如下所示：

 var ModulesTable = React.createClass({ getInitialState: function () { return { modules: "" }; }, componentDidMount: function () { var get = $.get("/api/Modules/GetModules") .done(function (results) { if (results != null) { var rows = results.map((module) => { var statusImg; if (module.IsActive) statusImg = <a><i className="ti-check"></i></a>; return (<tr> <td>{module.ModuleId}</td> <td>{module.ModuleName}</td> <td>{statusImg}</td> </tr>); } ); this.setState({ modules: rows }); } } .bind(this)) .fail(function (err) { alert(err); }); }, render: function () { return (<table className="table table-striped"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Used</th> </tr> </thead> <tbody> {this.state.modules} </tbody> </table>); } }); ReactDOM.render( <ModulesTable />, document.getElementById("tableContainer")); 

问题在于该组件未使用从API返回的数据进行更新，并且控制台未显示任何错误的迹象，并且该API工作正常。 我怀疑setState可能存在问题。 我在这里做错了什么？

Answer 1

this不适用于jQuery xhr callbacks 。 只要试试这个

    const self = this;
    var get = $.get("/api/Modules/GetModules")
        .done(function (results) {

            if (results != null) {
                var rows = results.map((module) => {

                    var statusImg;
                    if (module.IsActive)
                        statusImg = <a><i className="ti-check"></i></a>;

                    return
                    (<tr>
                        <td>{module.ModuleId}</td>
                        <td>{module.ModuleName}</td>
                        <td>{statusImg}</td>
                    </tr>);
                }
                );
                self.setState({
                    modules: rows
                });
            }
        }
            .bind(this))
        .fail(function (err) {
            alert(err);
        });

Answer 2

我已经找到摆脱地图功能的解决方案，并使用常规的for循环解决了我的问题，如下所示：

componentDidMount: function () {

        var get = $.get("/api/Modules/GetModules")
            .done(function (results) {
                if (results != null) {

                    var rows = [];
                    for (var i = 0; i < results.length; i++) {
                        var module = results[i];

                        if (module.IsActive) {

                            rows.push(
                                <tr>
                                    <td>{module.ModuleId}</td>
                                    <td>{module.ModuleName}</td>
                                    <td><a><i className="ti-check"></i></a></td>
                                </tr>
                            );
                        }

                        else {
                            rows.push(
                                <tr>
                                    <td>{module.ModuleId}</td>
                                    <td>{module.ModuleName}</td>
                                    <td><a><i className="ti-close"></i></a></td>
                                </tr>
                            );
                        }

                    }

                    this.setState({
                        modules: rows
                    });

                    console.log(rows);
                }
            }.bind(this))
            .fail(function (err) {
                alert(err);
            });
    }

Answer 3

this.state.modules而不是modules ，请参见演示@ https://jsfiddle.net/wv3yopo0/2674/