javascript - 如何在 react-country-region-selector 中使用 useReducer？

Question

我将 react-country-region-selector 与 useState 一起使用，它运行良好，并使用我选择的国家/地区更新了下拉列表，代码如下：

import React, { useState } from 'react';

const App = () => {
  const [country, setCountry] = useState('');
  
  const handleCountryChange = (country) => {
    setCountry(country);
  }
  
  return (
    <CountryDropdown
        value={country}
        onChange={handleCountryChange}
        />
  )
}

现在我正在尝试使用 useReducer 因为我有多个状态要更新。但是我的代码不再适用于 react-country-region-selector，代码如下：

import React, { useReducer } from 'react';

const App = () => {

  const reducer = (state, action) => {
    switch (action.type) {
      case 'setCountry':
        return {
          country: state.country
        }
    }
  }
  
  const handleCountryChange = (country) => {
    dispatch({type: 'setCountry'});
  }
  
  return (
    <CountryDropdown
        value={country}
        onChange={handleCountryChange}
        />
  )

}

选择国家时，下拉列表不再更新。在这种情况下，useReducer 有什么问题？如何使用 useReducer 更新国家/地区选择？

Answer 1

您可以在此处阅读有关 useReducer 的更多详细信息：https ://reactjs.org/docs/hooks-reference.html#usereducer

您的代码应该是：

import React, { useReducer } from 'react';

const App = () => {

    const reducer = (state, action) => {
        switch (action.type) {
            case 'setCountry':
                return {
                    ...state,
                    country: action.country
                }
        }
    }

    const [state, dispatch ]=  useReducer(reducer, {country: ''});

    const handleCountryChange = (country) => {
        dispatch({type: 'setCountry', country});
    }

    return (
        <CountryDropdown
            value={state.country}
            onChange={handleCountryChange}
        />
    )
}