如果异步操作已成功获取数据并更新状态，则也仅调度一次操作

Question

我只想分派一个动作一次，但我传递给这个动作的有效负载取决于另一个异步动作获取的结果，该动作也只运行一次。

const data=useSelector(aSelector.getData);
const selectedData=useSelector(bSelector.getSelectedData);

React.useEffect(()=>{
       dispatch(sagaAction.fetchData());   //this is async action that sets state which I use to dispatch below action
       dispatch(simpleAction.setSelectedData(data.name);  //This action sets state which is used as selectedData.this action should run once when above action has succesfully fetched data .Both actions should run only once 

})

上面的代码并不完全正确。只是给出一个想法，我想实现什么以及我认为我可以如何做到这一点。是否有任何合理的方法可以实现这一目标。提前致谢。

Answer 1

您需要将它们分成两个不同的useEffect 钩子，并像这样利用useEffect 的依赖参数：

const data = useSelector(aSelector.getData);
const selectedData = useSelector(bSelector.getSelectedData);

React.useEffect(() => {
  // The [data] array below tells React to run this useEffect when the
  // component mounts and then again any time `data` changes, 
  // but then we use the `if` statement to make sure
  // we only run the dispatch when `data` exists
  if(data) {
    dispatch(simpleAction.setSelectedData(data.name);
  }
}, [data])

React.useEffect(() => {
  // The empty array below tells React to only run this `useEffect` once when the component mounts
  dispatch(sagaAction.fetchData());
}, [])