React：如何在功能组件中强制状态更新？

此功能组件具有一个调用的模板方法onChangeHandler，该方法接受一个select值并更新state。问题是，state直到第二次调用render方法之后才更新，这意味着selected选项的state值比的值领先一步selectedRouteName。

我知道类组件中可以使用生命周期方法来强制进行state更新，但是，如果可能的话，我希望将其保留为功能组件。

如代码中所述，的记录状态为selectedRouteDirection所选选项后面的一个值。如何强制将state其更新为功能组件中的正确值？

这个问题与命名类似的问题不同，因为我的问题询问的是我用例中的实际实现，而不是询问是否可能。

import React, { useState, Fragment, useEffect } from 'react';

const parser = require('xml-js');

const RouteSelect = props => {
    const { routes } = props;

    const [selectedRouteName, setRouteName] = useState('');
    const [selectedRouteDirection, setRouteDirection] = useState('');

    //console.log(routes);

    const onChangeHandler = event => {

        setRouteName({ name: event.target.value });

        if(selectedRouteName.name) {
            getRouteDirection();
        }
    }
/*
    useEffect(() => {
        if(selectedRouteName) {
            getRouteDirection();
        }
    }); */

    const getRouteDirection = () => {

        const filteredRoute = routes.filter(route => route.Description._text === selectedRouteName.name);
        const num = filteredRoute[0].Route._text;

        let directions = [];
        fetch(`https://svc.metrotransit.org/NexTrip/Directions/${num}`)
            .then(response => { 
                return response.text();
            }).then(response => {
                return JSON.parse(parser.xml2json(response, {compact: true, spaces: 4}));
            }).then(response => {
                directions = response.ArrayOfTextValuePair.TextValuePair;
                // console.log(directions);
                setRouteDirection(directions);    
            })
            .catch(error => {
                console.log(error);
            });

            console.log(selectedRouteDirection); // This logged state is one value behind the selected option
    }

    const routeOptions = routes.map(route => <option key={route.Route._text}>{route.Description._text}</option>);

    return (
        <Fragment>
            <select onChange={onChangeHandler}>
                {routeOptions}
            </select>
        </Fragment>
    );
};

export default RouteSelect;