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

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

setState（）in react js总是会导致重新渲染。

Answer 2

如果您的道具正在更新，那么最好使用

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

react会在状态发生变化时呈现组件，因此您可以使用

this.setState(this.state)

如果你想更新你的render（）方法读取this.props or this.state以外的东西，你需要通过调用

告诉React何时需要重新运行render（）

forceUpdate()

如何强制reactJS重绘？

2 个答案: