javascript - React 状态变化不是渲染

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，因此没有任何变化，因此您的用户界面似乎没有更新