Question

我正在尝试使用React生成基于Rest Web服务调用的html表。仅显示表头。表格行是空白的。如果我调试它，行

之后

tableModel.rows =  this.state.rows;

tableModel.rows是'undefined'。

我不知道问题是什么。

<!DOCTYPE html>
<html>
    <head>
        <title>React Flux</title>
        <script src="https://fb.me/react-0.13.3.js"></script>
        <script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
        <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    </head>
    <body>
        <div id="container" style="color:red"></div>

        <script type="text/jsx">


            var tableModel = {
               cols: ["id", "name"],
               rows: [],
            }

            var Table = React.createClass({
                getInitialState: function () {
                    return {text: ''};
                },
                componentDidMount: function(){
                    $.ajax({
                        url: "http://localhost:8080/rest/user/findAll"
                    }).then(function(data) {
                        this.setState({            
                            rows: data});
                    }.bind(this))
                },
                render: function() {

                    tableModel.rows =  this.state.rows;

                    var _self = this;

                    var thead = React.DOM.thead({},
                       React.DOM.tr({},
                       this.props.cols.map(function (col) {
                       return React.DOM.th({}, col);
                    })));

                    var tbody = this.props.rows.map(function (row) {
                        return React.DOM.tr({},
                        _self.props.cols.map(function (col) {
                           return React.DOM.td({}, row[col] || "");
                        }));
                    });
                    return React.DOM.table({}, [thead, tbody]);
                }
            });

            React.render(<Table cols={tableModel.cols} rows={tableModel.rows} />, container);

        </script>
    </body>
</html>

Answer 1

当您的Table setState，它的render功能将被召回，但为什么您认为它的道具会重新填充？它保持不变，表this.props.rows === []。您可以通过将tableModel放入Table state并使用this.state而不是this.props来修复它，或者将另一个类包装到Table以管理数据提取和填充数据到Table班。

React表行的人口问题

1 个答案: