javascript - React - 使用数据设置状态不起作用/将其设置为空数组 - 为什么？

Question

我正在尝试遍历数据并将其显示在我的 React 应用程序中。在我将结果存储在组件状态之前，我的代码一直有效。不知何故(我将它标记为“这里它不再工作”，因为它很难解释。我重写了我的实际代码，因为我不想在这里发布数百行代码:)并且还交换了数据(我实际上收到了一个带有对象(我只调整了大小)的 http 请求 - 所以如果代码的某些部分看起来很奇怪/太多，请不要注意，因为我的实际代码要大得多。我还在此处添加了一个 codepen 链接，您在这里看不到任何内容(因为它不起作用)，但我包含了 console.logs，因此您可以明白我的意思。非常感谢您的帮助!!

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'));

Answer 1

setState 可以通过响应批量更新和优化性能异步执行。

---

您可以为 setState 提供回调，一旦更新实际完成，就会调用该回调:

this.setState({
    result: tempFlightsObject
}, function () { console.log("result", this.state.result) })