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

Posted 2023-02-22

【中文标题】React hook useSelector 值在异步函数中未更改

【英文标题】：React hook useSelector value not changed inside async function

【发布时间】：2020-11-20 21:04:41

【问题描述】：

我已经将 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，但是，当我进行更改时，我可以在useSelector 中看到我的hasChanged 已经变为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 是async-await 所以里面的值不会从最新状态中获取？

【参考方案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>
);

【讨论】：

好吧，这可能行不通，因为我的selectChange(userId, userCode) 实际上是我的子组件的回调，它会在那里设置输入参数...

我认为您应该将输入变量存储在全局状态中。

你弄明白了吗？我也面临同样的问题！