Javascript 等待onClick事件中的父状态更改，并使用挂钩进行响应

我面临的问题如下

我有一个React无状态下拉组件，它公开了onClick方法

当这个onClick方法被触发时，我会改变下拉列表的状态，它会再次传递给同一个下拉列表组件

下拉组件如下所示：

<DynamicDropdown
    dropdown={dropdownData}
    state={dropdownState}
    onToggleClick={onDropdownToggleClick}
    onDismissDropdown={onDismissDropdown}
/>

const [dropdownState, setDropdownState] = useState<DropdownState>();
const onDropdownToggleClick = async (s: DropdownState) => {
  if (s === 'closed') {
    setDropdownState('fetching');
    const requests = await EnvironmentsAPI.getEnvironmentActiveRequests(
      environmentId
    );
    setActiveRequests(requests);
    setDropdownState('open');
  } else {
    setDropdownState('closed');
  }
};

现在的问题是，抓取是由redux处理的，它没有给出我可以等待的承诺

我试过做两件事：

一,-

然后有一个useEffect，我打开下拉列表

useEffect(() => {
  if (!fetching) {
    setDropdownState('open');
  }
},[]);

但这里的问题是，抓取是每15秒进行一次轮询，大多数情况下它是错误的。每隔15秒，它将变为true，最多持续1秒。因此，大多数情况下，即使获取环境的API未完成，我的下拉列表也会变为“打开”

2-我尝试手动创建一个承诺，在获取更改时，该承诺将以某种方式得到解决。只有在切换下拉菜单时，才会创建此承诺

const [fetchingResolve, setFetchingResolve] = useState<
  (value?: unknown) => void
>();
useEffect(() => {
  if (!fetching && fetchingResolve) {
    fetchingResolve();
  }
}, [fetching, fetchingResolve]);
const onDropdownToggleClick = async (s: DropdownState) => {
  if (s === 'closed') {
    setDropdownState('fetching');
    const fetchingPromise = new Promise(resolve => {
      setFetchingResolve(resolve);
    });
    await fetchingPromise;
    const requests = await EnvironmentsAPI.getEnvironmentActiveRequests(
      environmentId
    );
    setActiveRequests(requests);
    setDropdownState('open');
  } else {
    setDropdownState('closed');
  }
};

const[fetchingResolve，setFetchingResolve]=useState<
（值？：未知）=>无效
>();
useffect（（）=>{
if（！fetching&&fetchingsolve）{
fetchingsolve（）；
}
}，[fetching，fetchingsolve]）；
const onDropdownToggleClick=async（s:DropdownState）=>{
如果（s==‘关闭’）{
setDropdownState（“获取”）；
const fetchingPromise=新承诺（解析=>{
setFetchingResolve（解析）；
});
等待你的承诺；
const requests=wait EnvironmentsAPI.getEnvironmentActiveRequests(
环境ID
);
setActiveRequests（请求）；
setDropdownState（“打开”）；
}否则{
setDropdownState（“关闭”）；
}
};

现在，这一承诺马上得到了解决。我试着在useRef中遵守这个承诺

const fetchingResolve = useRef<(value?: unknown) => void>();
useEffect(() => {
  console.log(fetchingResolve.current);
  if (!fetching && fetchingResolve.current) {
    fetchingResolve.current();
  }
}, [fetching, fetchingResolve.current]);
const onDropdownToggleClick = async (s: DropdownState) => {
  if (s === 'closed') {
    setDropdownState('fetching');
    const fetchingPromise = new Promise(resolve => {
      fetchingResolve.current = resolve;
    });
    await fetchingPromise;
    const requests = await EnvironmentsAPI.getEnvironmentActiveRequests(
      environmentId
    );
    setActiveRequests(requests);
    setDropdownState('open');
  } else {
    setDropdownState('closed');
  }
};

const fetchingrolve=useRef void>（）；
useffect（（）=>{
日志（fetchingsolve.current）；
if（！fetching&&fetchingsolve.current）{
fetchingsolve.current（）；
}
}，[fetching，fetchingsolve.current]）；
const onDropdownToggleClick=async（s:DropdownState）=>{
如果（s==‘关闭’）{
setDropdownState（“获取”）；
const fetchingPromise=新承诺（解析=>{
fetchingsolve.current=解析；
});
等待你的承诺；
const requests=wait EnvironmentsAPI.getEnvironmentActiveRequests(
环境ID
);
setActiveRequests（请求）；
setDropdownState（“打开”）；
}否则{
setDropdownState（“关闭”）；
}
};

这部分起了作用。问题是，如果

fetchingsolve.current

未定义初始值，则它将等待下一个获取周期（15秒）后再更新

任何线索或其他方法都将非常有用。谢谢

---

如果我不能解释我的问题，请告诉我。

你能把你的目标描述成一个用户故事吗？@PavlosKaralis，我不明白。你能澄清一下吗？

const [fetchingResolve, setFetchingResolve] = useState<
  (value?: unknown) => void
>();
useEffect(() => {
  if (!fetching && fetchingResolve) {
    fetchingResolve();
  }
}, [fetching, fetchingResolve]);
const onDropdownToggleClick = async (s: DropdownState) => {
  if (s === 'closed') {
    setDropdownState('fetching');
    const fetchingPromise = new Promise(resolve => {
      setFetchingResolve(resolve);
    });
    await fetchingPromise;
    const requests = await EnvironmentsAPI.getEnvironmentActiveRequests(
      environmentId
    );
    setActiveRequests(requests);
    setDropdownState('open');
  } else {
    setDropdownState('closed');
  }
};

const fetchingResolve = useRef<(value?: unknown) => void>();
useEffect(() => {
  console.log(fetchingResolve.current);
  if (!fetching && fetchingResolve.current) {
    fetchingResolve.current();
  }
}, [fetching, fetchingResolve.current]);
const onDropdownToggleClick = async (s: DropdownState) => {
  if (s === 'closed') {
    setDropdownState('fetching');
    const fetchingPromise = new Promise(resolve => {
      fetchingResolve.current = resolve;
    });
    await fetchingPromise;
    const requests = await EnvironmentsAPI.getEnvironmentActiveRequests(
      environmentId
    );
    setActiveRequests(requests);
    setDropdownState('open');
  } else {
    setDropdownState('closed');
  }
};