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

Question

我正在尝试遍历数据并将其显示在我的 React 应用程序中。在我将结果存储在组件状态之前，我的代码一直有效。不知何故（我将代码标记为 'HERE IT DOESNT WORK ANYMORE' 因为它很难解释。我已经重写了我的实际代码，因为我不想在这里 post 数百行代码 :) 并且还交换了数据（我实际上收到了一个 http 请求）和一个对象（我只调整了大小） - 所以如果代码的某些部分看起来 weird/too 很多，请不要注意我的实际代码要大得多。我还在此处添加了代码笔 link，您看不到任何东西（因为它不起作用），但我包含了 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 是一个异步函数。出于性能原因，React 批量更新。有关详细信息，请参阅 https://reactjs.org/docs/react-component.html#setstate。

您的组件应该会重新呈现，但您可能无法在设置后立即记录状态。如果需要，您可以添加一个回调作为 setState 的第二个参数，它将 state 作为第一个也是唯一的参数。

Answer 2

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

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

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

Answer 3

setState可以批量处理。

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

会起作用

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

React - setting state with data does not work/ sets its to an empty array - why?

javascript

setstate

reactjs