Извлечение данных из пользовательского выбора с помощью реагирующих хуков

Question

Так что я довольно новичок в React Hooks и не могу этого понять. Я пытаюсь сделать так, чтобы пользователь выбрал элемент из выпадающего меню и получал данные каждый раз, когда пользователь выбирает новый элемент. Переменная selectedState обновляется, когда пользователь выбирает элемент из выпадающего меню, но моя функция useEffect должна дважды извлечь данные, прежде чем получить правильные данные для текущего selectedState. Я думал о том, чтобы разделить выпадающий список на его собственный компонент и передать данные другому компоненту для извлечения данных, но я не знаю, действительно ли это решит проблему.

вот мой код:

    const initialState = () => {
        return {
            loading: true,
            post: '',
            error: ''
        }
    }

function reducer(state, action) {
        switch (action.type) {
            case 'fetch_success':
                return {
                    loading: false,
                    post: action.payload,
                    error: ''
                }
            case 'fetch_error':
                return {
                    loading: false,
                    post: {},
                    error: 'Something went wrong'
                }
            default:
                return state
        }
    }

    export default () => {
        const [state, dispatch] = useReducer(reducer, initialState);
        const [selectedState, getSelectedState] = useState('');
        const dropDownList = ['Alabama', 'Alaska', 'American Samoa', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'District of Columbia', 'Florida', 'Georgia', 'Guam', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Minor Outlying Islands', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota', 'Northern Mariana Islands', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Puerto Rico', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'U.S. Virgin Islands', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming']


        const dropDown =
            <select
                id="state-dropdown"
                onChange={e => getSelectedState(e.target.value)}
                value={selectedState}
                disabled={!dropDownList.length}>
                <option>Choose State</option>
                {dropDownList.map((item) => <option key={item} value={item}>{item}</option>)}
            </select >


        useEffect(() => {
            async function fetchData() {
                const response = await fetch((`https://covid-19-statistics.p.rapidapi.com/reports?&iso=USA&region_name=US&date=2020-04-16&q=US%20${selectedState}`), {
                    "method": "GET",
                    "headers": {
                        "x-rapidapi-host": "covid-19-statistics.p.rapidapi.com",
                        "x-rapidapi-key": "8eb0a7c674msh30916dd1116d55cp1700f5jsn651eb7015384"
                    }
                });
                dispatch({ type: 'fetch_success', payload: response.json() });
            }
            fetchData();
        }, [selectedState, dispatch]);

        {console.log(state)}


        return (
            <div>
                <CardHeader>- State -</CardHeader>
                <Card>
                    <label>
                        {dropDown}
                    </label>
                </Card>
            </div>
        )
    }