如何强制ReactJS重新绘制？

Question

我正在尝试通过使用this.setState({ data: data });进行ajax调用来更新我的表格，但是datatable没有用新数据重新绘制？（我可以看到已经接收到了新数据）

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

- Banshee

Answer 1

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

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

在React JS中，setState()始终会导致重新渲染。

- Piotr Karbownik

Answer 2

如果要更新道具，则最好使用

componentWillReceiveProps(nextProps) {
  this.props.data = nextProps.data;
}

当状态改变时，React 将重新渲染组件，因此可以使用

this.setState(this.state)

如果您想让render()方法读取除了this.props或this.state之外的其他内容，则需要通过调用forceUpdate()来告诉React何时需要重新运行render()。

- Murali K

---

React会自动将nextProps分配给this.props，因此您的第一个代码示例实际上是不正确的。您只需要实现componentWillReceiveProps来添加prop更改的副作用。 - Rhys van der Waerden