Сортировочная колонка ReactJS с созданием динамического класса

Question

Я унаследовал большую кучу кода, и это обычно работает.Это работает на v0.13.3.

У меня проблема с сортировкой столбцов.Всякий раз, когда я вызываю обработчик для события щелчка ниже, я получаю нулевое значение this.state.Я, должно быть, упускаю что-то простое, потому что я много смотрю / сравниваю с другим рабочим кодом, и я просто не вижу этого, но этот пример компонента мешает мне.

Я упростил до простогопроблемный компонент в виде автономного html-файла со статическими образцами данных:

<div id="content">Loading ...</div>
<script>
var theData = [{"id":"47483648","labName":"Lab0"},{"id":"47483650","labName":"Lab1"},{"id":"47483651","labName":"Lab2"},{"id":"47483654","labName":"Lab3"}];

function render() {
  React.render(React.createElement(aTable, {data: theData}),document.getElementById("content"));
}

var aTable = React.createClass({displayName: "aTable",
  handleHeaderClick: function(sortBy) {
      console.log("firing aTable handleHeaderClick");
      //this.state is null here
      var newState = this.state;

      if (this.state.sortBy === sortBy && this.state.sortOrder === 'asc') {
          newState.sortOrder = 'desc';
      }
      else {
          newState.sortOrder ='asc';
      }
      newState.sortBy = sortBy;

      this.setState(newState);
  },
  render: function(){
      var theItems = $.map(this.props.data, function (key, value) {
          console.log("the items", key);
          return (
              React.createElement("tr",{key: key.id + "-row"}, 
                  React.createElement("td", {key: key.agentid}, key.id),
                  React.createElement("td", {key: key.labName}, key.labName),
              )
          );
      });

      return (
          React.createElement("div", {id: "holder"},  
              React.createElement("div", {id: "a-table"}, 
                  React.createElement("table",null,
                      React.createElement("thead",null,
                          React.createElement("tr",null,
                              React.createElement("th",null," The ID"),
                              React.createElement("th",
                                  {onClick: this.handleHeaderClick.bind(this, "labName")},
                                  "Lab Name")
                              )
                          ),
                      React.createElement("tbody",null,
                          theItems
                      )
                  )
              )
          )
      );
  }
});


$(document).ready(function () {

  render();
});

Это вызывает исключение в нулевом состоянии:

basic.html:37 Uncaught TypeError: Cannot read property 'sortBy' of null

, которое ссылается на эту строку:

if (this.state.sortBy === sortBy && this.state.sortOrder === 'asc') {

У меня есть широта, чтобы изменить логику обработчика, но я пока застрял с этим шаблоном.

Заранее спасибо.

РЕДАКТИРОВАТЬ 1 Этоэто рабочая скрипка, где я работал над сортировкой, выполняя сортировку полей в массиве данных после того, как Си указал, где мне не хватало исходного состояния: рабочая скрипка

Answer 1

state равно null, поскольку вы не установили начальное значение.

Test = React.createClass({
  getInitialState: function() {
    return {};
  }
})

это эквивалентно

class Test extends Component {
  constructor(props) {
    this.state = {}
  }
}