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

Question

I'm working on a react component that render a table with some data coming down from an API on the server as follows:

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

The problem is the component is not gets updated with the data returned from the API and the console show no signs of any error plus the API is working fine. I suspect that the problem with setState probably. what i'm doing wrong here?

Answer 1

this does not work with jQuery xhr callbacks . Just try this instead

    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

I've found a solution by getting rid of map function and use the regular for loop fixed my problem as following :

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/