useReducer未正确更新
useReducer未正确更新
提问于 2019-04-17 05:58:39
我有一个Select自定义组件，它只有一个select，options和侦听onChange，然后我有一个useReducer代码，它用一些变量初始化，在选择一个选项后，我的状态仍然有初始化值
当我选择ANOTHER时，performSearch中的值是ALL
const reducer = (state, newState) => ({ ...state, ...newState });
const [state, setState] = useReducer(reducer, {
filterStatus : 'ALL'
});
const performSearch = () => {
console.log(state.filterStatus) //<= first time is ALL, second time same value ALL, third, is another value
}
useEffect(() => {
performSearch()
},[])
<Select
onChange={(e) => {
const {value} = e.target
setState({filterStatus:value})
performSearch()
}}
items={[{key:"ALL",value:"ALL"},{key:"ANOTHER",value:"ANOTHER"}]}
/>有什么想法吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-04-17 06:55:31
如果让我猜测，我会说这是因为您试图在设置状态之前调用performSearch来记录控制台。如果您在返回组件之前对状态进行控制台日志记录，则可能能够看到状态中的正确值。我不确定你的用例是什么，但是如果你想使用这个值，你可以在你的函数中返回它，而不用担心reducer和状态。如下所示：
const performSearch = (value) => {
console.log(value)
}
useEffect(() => {
performSearch('ALL')
},[])
<Select
onChange={(e) => {
const {value} = e.target
performSearch(value)
}}
items={[{key:"ALL",value:"ALL"},{key:"ANOTHER",value:"ANOTHER"}]}
/>如果您需要使用reducer，那么您可以创建promise，或者我只需将值返回给preformSearch，然后通过您的reducer设置状态，如下所示：
const reducer = (state, newState) => ({ ...state, ...newState });
const [state, setState] = useReducer(reducer, {
filterStatus : 'ALL'
});
const performSearch = (value) => {
setState({filterStatus: value});
//Do your stuff with the value
console.log(value)
}
useEffect(() => {
//you can probably just set the value in preformSearch here manually or you can set it to the states value but setting to the states value would result in another render because you would set the state in performSearch again
performSearch(state.filterStatus)
},[])
<Select
onChange={(e) => {
const {value} = e.target
performSearch(value)
}}
items={[{key:"ALL",value:"ALL"},{key:"ANOTHER",value:"ANOTHER"}]}
/>但是，正如我所说的，我不确定这个组件的最终目标是什么，但是对于这个用例，我不确定您是否需要使用useReducer函数。
Stack Overflow用户
发布于 2019-04-17 06:57:56
问题是您在onChange函数中调用performSearch()，因此当您设置新状态时，您将只能看到来自前一个状态的值。尝试将performSearch函数放在onSelect函数之外，您将获得正确的输出。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55717174
复制相关文章
相似问题