0

私はしばらくの間、useSelector と useDispatch で React Hook を使用してきました。ほとんどの場合、非常にうまく機能しますが、最近、非常に有線のシナリオを経験しました。例えば

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

私は自分のプロパティを状態に保存しており、コンポーネントで何かが変更されるたびに、私のhasChangedfromはtrueuseSelectorになりますが、変更を加えると、すでにtrueになっていることがわかりますが、関数内ではまだfalseです!hasChangeduseSelectorselectChange

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 であるため、内部の値が最新の状態からフェッチされないのではないかと思っていますか?

4

1 に答える 1

0

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>
);
于 2020-07-31T01:54:40.157 に答える