我正在尝试为我们的应用程序创建一个可重用的SelectDropdown组件（此SelectDropdown将在整个平台上使用，而不仅仅是在此页面上使用），并想知道是否可以在当前正在从第一个组件进行API调用时停止第二个相同组件上的API调用
dropdown-with-option.tsx：

const DropdownWithOptions= (props) => {
  const [ options, setOptions ] = useState([]);

  const syncOptions = (items) => {
    setOptions(items);
  };

  useEffect(() => {
    if (!options || options.length === 0) {
      // api call
      getSelections().then(syncOptions);
    }
  }, []);

  return <Dropdown options={options} {...props}/>
};

page.tsx：

const Page = () => {
  return <>
     <DropdownWithOptions/> // - first component should run the api call
     <DropdownWithOptions/> // - second same component should not run the api call
  </>
}

我现在不知道这是否可能
我已经在使用Context，但不知道如何告诉第二个组件等待state/ API调用完成，据我所知，两个组件在渲染时将具有相同的state，它将尝试做同样的事情（调用API），所以在这种情况下，使用isDoneCallingAPI状态将不起作用，我不想在此时使用Observables。
任何回答或评论都将非常有帮助