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

我通过摆脱map函数找到了解决方案并使用常规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，请参阅demo @ https://jsfiddle.net/wv3yopo0/2674/

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

3 个答案: