我有一个有航班的州，我有一个滑块来更改最高价格以更改航班元素的可见性。
maxpriceFilter() {
var flightOffer = this.state.flightOffer;
var sliderPrice = this.state.sliderPrice;
for (var i = 0; i < flightOffer.length; i++) {
if( flightOffer[i].price > sliderPrice) {
this.setState(
{[flightOffer[i].hiddenprice] : true}
);
};
}
这段代码在状态的根中添加了一个状态为 true 的未定义字段......我找不到任何关于此的最佳实践，除了使用计算字段。但我也无法让计算域工作..
有人可以帮我吗？
您不想在循环中执行 setState 调用，这将使 react 组件多次渲染。构建一个新的状态对象并调用一次 setState。您也不想通过 if 语句过滤掉它，而是将以前的值设置为隐藏：
maxpriceFilter() {
var flightOffer = this.state.flightOffer;
var sliderPrice = this.state.sliderPrice;
var newState = {};
for (var i = 0; i < flightOffer.length; i++) {
newState[flightOffer[i].hiddenprice] = flightOffer[i].price > sliderPrice;
}
this.setState(newState);
// ...
}
如果您仍然遇到问题，可能是 hiddenprice 属性不是您所期望的？可能还需要发布您的 render() 函数。
与其在更新状态时进行循环，不如在渲染时进行切换？
您可能已经flightOffers在render(). 所以，只需在那里添加支票。在您的渲染中，hiddenPrice={offer.price > sliderPrice}作为props传递，或直接在您控制可见性的地方使用它。
为什么？因为在这种情况下特定项目的可见性不是状态。这是国家的结果。