gpt4 book ai didi

javascript - React 状态变化不是渲染

转载 作者:搜寻专家 更新时间:2023-11-01 04:24:01 26 4
gpt4 key购买 nike

我是 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>
);
}
});

最佳答案

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

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

您当前正在做的是添加一个带有关键数据的状态(即使您的getInitialState 函数中没有data 键)。并且由于您没有在任何地方使用 this.state.data,因此没有任何变化,因此您的用户界面似乎没有更新

关于javascript - React 状态变化不是渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31955596/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com