反应状态更改不是渲染

Question

我对React很新，我遇到的问题是我的初始状态是渲染，但是当状态通过AJAX调用时调用（成功）不会导致函数再次渲染。 那么，'getInitialState'设置一个静态的类别列表，'componentDidMount'从我的API中获取一个新列表。 调用正确执行并触发成功，因此我不知道为什么下拉列表没有更新。

  var Dropdown = React.createClass({
    getInitialState: function() {
      return {
        listVisible: false,
        display: ""
      };
    },

    select: function(item) {
      this.props.selected = item;
    },

    show: function() {
      this.setState({ listVisible: true });
      document.addEventListener("click", this.hide);
    },

    hide: function() {
      this.setState({ listVisible: false });
      document.removeEventListener("click", this.hide);
    },

    render: function() {
      return <div className={"dropdown-container" + (this.state.listVisible ? " show" : "")}>
        <div className={"dropdown-display" + (this.state.listVisible ? " clicked": "")} onClick={this.show}>
          <span>{this.props.selected.name}</span>
          <i className="fa fa-angle-down"></i>
        </div>
        <div className="dropdown-list">
          <div>
            {this.renderListItems()}
          </div>
        </div>
      </div>;
    },

    renderListItems: function() {
      var categories = [];
      for (var i = 0; i < this.props.list.length; i++) {
        var category = this.props.list[i];
        categories.push(<div onClick={this.select.bind(null, category)}>
          <span>{category.name}</span>
          <i className="fa fa-check"></i>
        </div>);
      }
      return categories;
    }
  });

var GridFilter = React.createClass({
getInitialState: function() {
  return {categoryList: [{
    name: "Cat1",
    value: "#F21B1B"
  }, {
    name: "Cat2",
    value: "#1B66F2"
  }, {
    name: "Cat3",
    value: "#07BA16"
  }] };
},
getCategories: function() {

  var nextPage = 1; //increase the page count
  ajax_url = "http://127.0.0.1:8200/api/categories/";
  ajax_type = "GET";
  ajax_data = {};

  $.ajax({
     url: ajax_url,
     type: ajax_type,
     contentType: 'application/x-www-form-urlencoded',
     data: ajax_data,
     dataType: 'json',

  success: function(data) {
    this.setState({
      data: this.state.categoryList,
    });
    //loading("off");
  }.bind(this),
  error: function(xhr, status, err) {
    console.error(this.props.url, status, err.toString());
  }.bind(this)

  });

 }, //end function
componentDidMount: function() {
  this.getCategories();
},
render: function() {
  return (
    <div id="filter-bar" className="stamp">
      <Dropdown list={this.state.categoryList} selected={this.state.categoryList[0]} />
      <p className="filter-select">Categories <i className="fa fa-angle-down"></i></p>
      <p className="filter-select">Type <i className="fa fa-angle-down"></i></p>
      <p className="filter-text">Filters:</p>

    </div>
  );
}
});

Answer 1

如果您尝试使用传入数据更改categoryList状态，则需要将设置状态更改为

this.setState({
  categoryList: data,
});

你目前正在做的是添加一个带有关键数据的状态（即使你的getInitialState函数中没有data键）。 因为你没有在任何地方使用this.state.data ，所以没有任何改变，所以你的ui似乎没有更新