1
私はデータを反復処理し、反応アプリに表示しようとしています。私のコードは、結果をコンポーネントの状態に格納するまで機能します。どういうわけか（説明するのは難しいと思っていましたが、ここでは数百行のコードを投稿したくないため実際のコードを書き直しました:)またデータを交換しました私は実際にHTTP要求を受け取っています）オブジェクト（私はサイズが変更されています）を持っています - 実際のコードがはるかに大きいので、コードのいくつかの部分が奇妙/過度に見える場合は注意を払わないでください。私はまた、ここであなたが何も見ることができないcodepenリンクを追加しました。（動作しないためですが）私はconsole.logを含んでいました。助けてくれてありがとう！データを持つ反応設定状態は機能しません/それを空の配列に設定します - なぜですか？
https://codepen.io/helloocoding/pen/vWVLmp?editors=1010
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: PricedItineraries,
result: []
}
this.handleInput = this.handleInput.bind(this);
this.showSearchResults = this.showSearchResults.bind(this);
}
showSearchResults(obj) {
console.log("func", this.state.data)
var allTrips = [];
var TotalPriceTemp = [];
for (var i = 0; i < obj.length; i++) {
var o = obj[i];
allTrips.push(o.AirItinerary.OriginDestinationOptions.OriginDestinationOption)
var totalFair = o.AirItineraryPricingInfo.PTC_FareBreakdowns.PTC_FareBreakdown.PassengerFare.TotalFare;
TotalPriceTemp.push(totalFair.Amount);
}
for (var i = 0; i < allTrips.length; i++) {
var MarketingAirlineTo = [];
var MarketingAirlineBack = [];
var TotalPrice = 0;
var oneWay = allTrips[i][0];
var returnTrip = allTrips[i][1];
oneWay.FlightSegment.forEach(function (flightTo) {
MarketingAirlineTo.push(flightTo.MarketingAirline.Code);
})
returnTrip.FlightSegment.forEach(function (flightTo) {
MarketingAirlineBack.push(flightTo.MarketingAirline.Code)
})
TotalPriceTemp.forEach(function (item) {
TotalPrice += item;
})
var tempFlightsObject = [];
tempFlightsObject.push({
marketingAirlineTo: MarketingAirlineTo,
marketingAirlineBack: MarketingAirlineBack,
TotalPrice: TotalPriceTemp[i]
})
console.log("tempFlightsObject", tempFlightsObject)
this.setState({
result: tempFlightsObject
})
console.log("result", this.state.result)
//HERE IT DOESNT WORK ANYMORE: TEMPFLIGHTOBJECT shows correct data, but result doesn't
}
}
handleInput() {
console.log("handeInput func", this.state.data)
this.showSearchResults(this.state.data);
console.log("handeInput func -result", this.state.result)
}
render() {
const flights = this.state.result.map((item, i) => {
return (
<div>
<div key={i}><p> {item.marketingAirlineTo} </p></div>
</div>
)
})
return (
<div>
<button onClick={this.handleInput}>click me</button>
<div> {flights}</div>
</div>
)
}
}
React.render(<App />, document.getElementById('app'));