Javascript 如何在数据更改时触发react render

我有以下数据：

var data = [
        ["The Lord of the Rings", "J. R. R. Tolkien", "English", "1954-1955", "150 million"], 
        ["Le Petit Prince (The Little Prince)", "Antoine de Saint-Exupéry", "French", "1943", "140 million"], 
        ["Harry Potter and the Philosopher's Stone", "J. K. Rowling", "English", "1997", "107 million"], 
        ["And Then There Were None", "Agatha Christie", "English", "1939", "100 million"], 
        ["Dream of the Red Chamber", "Cao Xueqin", "Chinese", "1754-1791", "100 million"], 
        ["The Hobbit", "J. R. R. Tolkien", "English", "1937", "100 million"], 
        ["She: A History of Adventure", "H. Rider Haggard", "English", "1887", "100 million"],
      ];

我使用它们来呈现一个表，每个表项都有一行（包含数据的书籍）。 出于学习目的，我想向数组中添加一个新项，并使用以下代码：

  var valueToPush = new Array();
  valueToPush[0]="Frodi societarie";
  valueToPush[1]="Lelio Faieta";
  valueToPush[2]="Italiano";
  valueToPush[3]="2004";
  valueToPush[4]="10";

  var myTimer = setTimeout(function() {data.push(valueToPush); console.log(data);}, 5000);

  var Ex = ReactDOM.render(
    React.createElement(Excel, {
      headers: headers,
      initialData: data,
    }),
    document.getElementById("app")
  );

我的目标是将新行添加到表中。该表使用以下代码呈现：

  var valueToPush = new Array();
  valueToPush[0]="Frodi societarie";
  valueToPush[1]="Lelio Faieta";
  valueToPush[2]="Italiano";
  valueToPush[3]="2004";
  valueToPush[4]="10";

  var myTimer = setTimeout(function() {data.push(valueToPush); console.log(data);}, 5000);

  var Ex = ReactDOM.render(
    React.createElement(Excel, {
      headers: headers,
      initialData: data,
    }),
    document.getElementById("app")
  );

重新呈现表格的下一步是什么？ 以下是我迄今为止的完整代码：

  var Excel = React.createClass({
    displayName: 'Excel',

    propTypes: {
      headers: React.PropTypes.arrayOf(
        React.PropTypes.string
      ),
      initialData: React.PropTypes.arrayOf(
        React.PropTypes.arrayOf(
          React.PropTypes.string
        )
      ),
    },

    getInitialState: function() {
      return {
        data: this.props.initialData,
        sortby: null,
        descending: false,
        edit: null, // [row index, cell index],
        search: false,
      };
    },

    _sort: function(e) {
      var column = e.target.cellIndex;
      var data = this.state.data.slice();
      var descending = this.state.sortby === column && !this.state.descending;
      data.sort(function(a, b) {
        return descending 
          ? (a[column] < b[column] ? 1 : -1)
          : (a[column] > b[column] ? 1 : -1);
      });
      this.setState({
        data: data,
        sortby: column,
        descending: descending,
      });
    },

    _showEditor: function(e) {
      this.setState({edit: {
        row: parseInt(e.target.dataset.row, 10),
        cell: e.target.cellIndex,
      }});
    },

    _save: function(e) {
      e.preventDefault();
      var input = e.target.firstChild;
      var data = this.state.data.slice();
      data[this.state.edit.row][this.state.edit.cell] = input.value;
      this.setState({
        edit: null,
        data: data,
      });
    },

    _preSearchData: null,

    _toggleSearch: function() {
      if (this.state.search) {
        this.setState({
          data: this._preSearchData,
          search: false,
        });
        this._preSearchData = null;
      } else {
        this._preSearchData = this.state.data;
        this.setState({
          search: true,
        });
      }
    },

    _search: function(e) {
      var needle = e.target.value.toLowerCase();
      if (!needle) {
        this.setState({data: this._preSearchData});
        return;
      }
      var idx = e.target.dataset.idx;
      var searchdata = this._preSearchData.filter(function(row) {
        return row[idx].toString().toLowerCase().indexOf(needle) > -1;
      });
      this.setState({data: searchdata});
    },

    _download: function(format, ev) {
      var contents = format === 'json'
        ? JSON.stringify(this.state.data)
        : this.state.data.reduce(function(result, row) {
            return result
              + row.reduce(function(rowresult, cell, idx) {
                  return rowresult 
                    + '"' 
                    + cell.replace(/"/g, '""')
                    + '"'
                    + (idx < row.length - 1 ? ',' : '');
                }, '')
              + "\n";
          }, '');

      var URL = window.URL || window.webkitURL;
      var blob = new Blob([contents], {type: 'text/' + format});
      ev.target.href = URL.createObjectURL(blob);
      ev.target.download = 'data.' + format;
    },

    render: function() {
      return (
        React.DOM.div(null,
          this._renderToolbar(),
          this._renderTable()
        )
      );
    },

    _renderToolbar: function() {
      return  React.DOM.div({className: 'toolbar'},
        React.DOM.button({
          onClick: this._toggleSearch,
        }, 'Search'),
        React.DOM.a({
          onClick: this._download.bind(this, 'json'),
          href: 'data.json',
        }, 'Export JSON'),
        React.DOM.a({
          onClick: this._download.bind(this, 'csv'),
          href: 'data.csv',
        }, 'Export CSV')
      );
    },

    _renderSearch: function() {
      if (!this.state.search) {
        return null;
      }
      return (
        React.DOM.tr({onChange: this._search},
          this.props.headers.map(function(_ignore, idx) {
            return React.DOM.td({key: idx},
              React.DOM.input({
                type: 'text',
                'data-idx': idx,
              })
            );
          })
        )
      );
    },

    _renderTable: function() {
      return (
        React.DOM.table(null,
          React.DOM.thead({onClick: this._sort},
            React.DOM.tr(null,
              this.props.headers.map(function(title, idx) {
                if (this.state.sortby === idx) {
                  title += this.state.descending ? ' \u2191' : ' \u2193';
                }
                return React.DOM.th({key: idx}, title);
              }, this)
            )
          ),
          React.DOM.tbody({onDoubleClick: this._showEditor},
            this._renderSearch(),
            this.state.data.map(function(row, rowidx) {
              return (
                React.DOM.tr({key: rowidx},
                  row.map(function(cell, idx) {
                    var content = cell;
                    var edit = this.state.edit;
                    if (edit && edit.row === rowidx && edit.cell === idx) {
                      content = React.DOM.form({onSubmit: this._save},
                        React.DOM.input({
                          type: 'text',
                          defaultValue: cell,
                        })
                      );
                    }

                    return React.DOM.td({
                      key: idx,
                      'data-row': rowidx,
                    }, content);
                  }, this)
                )
              );
            }, this)
          )
        )
      );
    }
  });

  var headers = [
    "Book", "Author", "Language", "Published", "Sales"
  ];

  var data = [
    ["The Lord of the Rings", "J. R. R. Tolkien", "English", "1954-1955", "150 million"], 
    ["Le Petit Prince (The Little Prince)", "Antoine de Saint-Exupéry", "French", "1943", "140 million"], 
    ["Harry Potter and the Philosopher's Stone", "J. K. Rowling", "English", "1997", "107 million"], 
    ["And Then There Were None", "Agatha Christie", "English", "1939", "100 million"], 
    ["Dream of the Red Chamber", "Cao Xueqin", "Chinese", "1754-1791", "100 million"], 
    ["The Hobbit", "J. R. R. Tolkien", "English", "1937", "100 million"], 
    ["She: A History of Adventure", "H. Rider Haggard", "English", "1887", "100 million"],
  ];
  this.state(data);

  var myTimer = setTimeout(function() {this.setState([this.state,["Frodi","Lelio","Italiano","2004","10"]]); console.log(data);}, 5000);
  var Ex = ReactDOM.render(
    React.createElement(Excel, {
      headers: headers,
      initialData: data,
    }),
    document.getElementById("app")
  );

var Excel=React.createClass({
displayName:“Excel”，
道具类型：{
标题：React.PropTypes.arrayOf(
React.PropTypes.string
),
initialData:React.PropTypes.arrayOf(
React.PropTypes.arrayOf(
React.PropTypes.string
)
),
},
getInitialState:函数（）{
返回{
数据：this.props.initialData，
sortby:null，
下降：错，
编辑：null，//[行索引，单元格索引]，
搜索：假，
};
},
_排序：函数（e）{
var列=e.target.cellIndex；
var data=this.state.data.slice（）；
var descending=this.state.sortby==列&&！this.state.descending；
数据排序（函数（a，b）{
返回下降
？（a[列]b[列]？1:-1）；
});
这是我的国家({
数据：数据，
排序：列，
下降：下降，
});
},
_showEditor:函数（e）{
此.setState（{编辑：{
行：parseInt（e.target.dataset.row，10），
单元格：e.target.cellIndex，
}});
},
_保存：功能（e）{
e、 预防默认值（）；
var输入=e.target.firstChild；
var data=this.state.data.slice（）；
数据[this.state.edit.row][this.state.edit.cell]=input.value；
这是我的国家({
编辑：空，
数据：数据，
});
},
_preSearchData:null，
_toggleSearch:function（）{
if（this.state.search）{
这是我的国家({
数据：这是数据，
搜索：假，
});
这是。_preSearchData=null；
}否则{
this.\u preSearchData=this.state.data；
这是我的国家({
搜索：对，
});
}
},
_搜索：功能（e）{
var指针=e.target.value.toLowerCase（）；
如果（！针）{
this.setState（{data:this.\u preSearchData}）；
返回；
}
var idx=e.target.dataset.idx；
var searchdata=this.\u preSearchData.filter（函数（行）{
返回行[idx].toString（）.toLowerCase（）.indexOf（指针）>-1；
});
this.setState（{data:searchdata}）；
},
_下载：功能（格式，ev）{
var contents=格式==='json'
？JSON.stringify（this.state.data）
：this.state.data.reduce（函数（结果，行）{
返回结果
+reduce（函数（rowresult、cell、idx）{
返回行结果
+ '"' 
+单元格。替换（/“/g，”））
+ '"'
+（idximport React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      books: [
        [
          "The Lord of the Rings",
          "J. R. R. Tolkien",
          "English",
          "1954-1955",
          "150 million"
        ],
        [
          "Le Petit Prince (The Little Prince)",
          "Antoine de Saint-Exupéry",
          "French",
          "1943",
          "140 million"
        ],
        [
          "Harry Potter and the Philosopher's Stone",
          "J. K. Rowling",
          "English",
          "1997",
          "107 million"
        ],
        [
          "And Then There Were None",
          "Agatha Christie",
          "English",
          "1939",
          "100 million"
        ],
        [
          "Dream of the Red Chamber",
          "Cao Xueqin",
          "Chinese",
          "1754-1791",
          "100 million"
        ],
        ["The Hobbit", "J. R. R. Tolkien", "English", "1937", "100 million"],
        [
          "She: A History of Adventure",
          "H. Rider Haggard",
          "English",
          "1887",
          "100 million"
        ]
      ]
    };
  }

  componentDidMount() {
    setTimeout(() => {
      this.setState({
        books: [
          ...this.state.books,
          ["Frodi societarie", "Lelio Faieta", "Italiano", "2004", "10"]
        ]
      });
    }, 5000);
  }

  render() {
    return (
      <ul>
        {this.state.books.map((book, index) => (
          <li key={index}>{book[0]}</li>
        ))}
      </ul>
    );
  }
}

export default App;

this.setState({
    tableData: [
        ...data,
        valueToPush 
    ] 
})