javascript - 如何强制reactJS重绘？

Question

我正在尝试使用 this.setState({ data: data }); 通过 ajax 调用更新我的表但是数据表没有用新数据重新绘制？ (我可以看到收到了新数据)

var GridRow = React.createClass({
    render: function() {
        var data = [], columns;

        if(this.props.columns){
            for(var i = 0; i < this.props.columns.length; i++){
                data.push({
                    HTMLclass: this.props.columns[i].HTMLClass,
                    content: this.props.cells[i]
                })
            }
        }


        columns = data.map(function(col, i) {
            return (
                <td className={col.HTMLclass} key={i}>{col.content}</td>
            );
        }.bind(this));

        return (
            <tr>
                {columns}
            </tr>
        );
    }
});
var GridHead = React.createClass({
    render: function() {
        if(this.props.data){
            var cell = this.props.data.Title;
            var htmlClass = this.props.data.HTMLClass;
        }
        return (
            <th className={htmlClass}>{cell}</th>
        );
    }
});
var GridList = React.createClass({
    render: function() {
        var tableClass = this.props.tableClass;
        if(this.props.data){
            var header = this.props.data.Columns.map(function (columns, i) {
                return (
                    <GridHead data={columns} key={i} />
                );
            });
            var row = this.props.data.Rows.map(function (row, i) {
                return (
                    <GridRow columns={data1.Columns} cells={row.Cells} key={i} />
                );
            });
        }
        return (
            <table className={tableClass}>
                <tr>{header}</tr>
                <tbody>
                    {row}
                </tbody>
            </table>
        );
    }
});


var GridPager = React.createClass({
    handleClick: function(e) {
        e.preventDefault();
        this.props.onPaging();
    },
    render: function() {
        return(
            <a href='#' onClick={this.handleClick}>Paging</a>
        );
    }
});

var gridPage = 0;

var GridBox = React.createClass({
    loadCommentsFromServer: function() {
        var xhr = new XMLHttpRequest();
        gridPage++;
        xhr.open('get', this.props.url + '/?pageNr=' + gridPage, true);
        xhr.onload = function() {
          var data = JSON.parse(xhr.responseText);
          this.setState({ data: data });
        }.bind(this);
        xhr.send();
    },
    handlePaginSubmit: function(comment) {
        this.loadCommentsFromServer();
      },
    getInitialState: function() {
        return { data: this.props.initialData };
    },
    render: function(){
        var tableClass = this.props.tableClass;
        return (
            <div>
                <GridList data={this.state.data} tableClass={tableClass} />
                <GridPager onPaging={this.handlePaginSubmit} />
            </div>
        );
    }
});

Answer 1

that = this
xhr.onload = function() {
  var data = JSON.parse(xhr.responseText);
  that.setState({ data: data });
}.bind(this);

在您的代码中，this 是回调方法的上下文，其中 setState 方法不可用，但它是一个回调，您不会收到有关它的错误。使用上面列出的技巧，以便您引用正确的上下文。

react js 中的 setState() 总是会导致重新渲染。