React hook useSelector值在异步函数内未更改

Question

我已经将React Hook与useSelector和useDispatch一起使用了一段时间，大部分情况下它运行得很好，但最近我遇到了一些非常复杂的场景。例如

// parentComponent
const MyComponent = (props) => {
const hasChanged = useSelector(state => {
const isChanged = checkIfChanged(state);
console.log('useSelector isChanged:>> ', isChanged);
return isChanged;
});
const selectChange = async(userId, userCode)=> {
console.log('selectChange hasChanged :>> ', hasChanged);
// ...
}
return (
<div>
<ChildComponent onSelectChange={selectChange} />
</div>
);
}

我的属性保存在状态中，每当组件中发生任何更改时，useSelector中的hasChanged都将变为true，但是，当我进行更改时，我可以看到我的hasChanged在useSelector中已经变为true，但在函数selectChange中仍然是false！

console log
useSelector isChanged:>> true
useSelector isChanged:>> true
selectChange hasChanged :>> false // why it's false here as already true from useSelector
useSelector isChanged:>> true

有人有同样的经历吗？我想知道是不是因为我的selectChanged是异步等待的，所以里面的值不会从最新状态中获取？

Answer 1

我认为您应该使用useEffect((；

const {userId, userCode} = useSelector(state => { /* ... */ });

const selectChange = async () => {
if (hasChanged) {
await dispatch(notifyUser(userId, userCode));
} else {
await dispatch(redirectPage(userCode));
}
}
useEffect(() => {
selectChange();
}, [hasChanged]); 

return (
<div>
<Select />
</div>
);