禁止在对话框打开时React组件重置数据

Question

打开对话框时，我很难解决如何防止重置组件变量的问题。我在组件中有一个API调用，在其中获取数据并在组件中显示数据，但是每当我尝试打开对话框时，都会发生API调用，并且每次打开和关闭对话框时都会重置组件变量。 / p>

const UserContent = props => {
   const [key, setKey] = useState();
   const [data, setData] = useState();

   const getData = async () => {
      if (!key) {
         return;
      }
      // fetches data with respect to key
      setData(values);
   };

   const getKey = async () => {
      // API call to fetch the key
      setKey(key);
   };

   useAsync(getKey, [!key]);
   useAsync(getData, [key]);

   return (
     // UI template to display the data with loader
   );
};

export default UserContent;

无论何时打开或关闭对话框，我都不想进行API提取调用并重置键和数据值。我希望有人能帮助我找出解决方案。

我是React的新手，仅两周前开始了我的React旅程。预先感谢。