reactjs - 使用反应钩子从用户选择中获取数据

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>
        )
    }

标签： reactjsasync-awaitreact-hooksuse-effectuse-state