如何解决如何在react-country-region-selector中使用useReducer?
我将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更新国家/地区选择?
解决方法
您可以在此处阅读有关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}
/>
)
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。