Javascript useReducer未正确更新

我有一个

Select

自定义组件，它只有一个Select、options和监听onChange，然后我有一个

useReducer

代码，它用一些变量初始化，在选择一个选项后，我的状态仍然有初始化值

当我选择

other

时，

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"}]}
/>

const reducer=（state，newState）=>（{…state，…newState}）；
const[state，setState]=useReducer（减速机{
过滤器状态：“全部”
});
常量性能搜索=（）=>{
console.log（state.filterStatus）//{
性能研究（）
},[])
{
常量{value}=e.target
设置状态（{filterStatus:value}）
性能研究（）
}}
items={[{key:“ALL”，value:“ALL”}，{key:“other”，value:“other”}
/>

---

有什么想法吗？

如果我不得不猜测的话，我会说这是因为您试图在设置状态之前调用performSearch来记录控制台。如果您在返回组件之前将状态记录在控制台日志中，您可能会看到状态中的正确值。我不确定你的用例是什么，但是如果你想使用这个值，你可以在你的函数中返回它，而不用担心减缩器和状态。像这样：

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"}]}
/>

const performSearch=（值）=>{
console.log（值）
}
useffect（（）=>{
performSearch（“全部”）
},[])
{
常量{value}=e.target
性能搜索（值）
}}
items={[{key:“ALL”，value:“ALL”}，{key:“other”，value:“other”}
/>

如果您需要使用reducer，那么您可能可以创建一个promise，或者我只需将值返回到preforgsearch，然后通过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"}]}
/>

const reducer=（state，newState）=>（{…state，…newState}）；
const[state，setState]=useReducer（减速机{
过滤器状态：“全部”
});
常量性能搜索=（值）=>{
setState（{filterStatus:value}）；
//用价值来做你的事情
console.log（值）
}
useffect（（）=>{
//您可以在此处手动设置preformSearch中的值，也可以将其设置为states值，但设置为states值将导致另一次渲染，因为您将再次在performSearch中设置状态
performSearch（state.filterStatus）
},[])
{
常量{value}=e.target
性能搜索（值）
}}
items={[{key:“ALL”，value:“ALL”}，{key:“other”，value:“other”}
/>

---

但是就像我说的，我不确定这个组件的最终目标是什么，但是对于这个用例，我不确定您是否需要使用useReducer函数。

问题是您在onChange函数中调用performSearch（），所以当您设置新状态时，您将只看到来自前一状态的值。尝试将performSearch函数置于onSelect函数之外，您将获得正确的输出

我相信你的代码实现是错误的。因为useReducer函数返回一个包含两个内容的数组。您的状态和分派函数不是setState（）