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>
  );
}

我将我的属性保存在状态中，每当我的组件中发生任何更改时，我的

hasChanged

中的

useSelector

将变为 true，但是，当我进行更改时，我可以看到我的

hasChanged

已经变为true在

useSelector

中，但在我的函数中仍然是false

selectChange

！

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>
);