获取内部使用效果的值，而不会干扰事件序列

Question

我在开始时具有以下使用效应，它将请求发送给dever，然后在此当前实现中相应地修改状态，我想根据DO数据来操纵共享变量，但我不想将其余的逻辑放入响应块中由于数据立即显示，并且它会刹车我的旋转器逻辑，任何想法如何以正确的方式进行此事件，即使我在提取之前正在等待，目前共享也是不确定的吗？

useEffect(() => {
    const getData = async () => {
      let shared = '';
      await fetch('/encrypt', {
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
        },
        method: 'POST',
        body: JSON.stringify({ clientId: params[1] }),
      })
        .then((res) => {
          res.json().then((data) => {
          
          shared = data.data.split('_Shared_')[1];
          });
        })
        .catch((err) => {
          dispatch(SetSnackBarMsg({ bool: true, msg: 'Cannot get data.' }));
        });

      setLoading(true);
      dispatch(SetBackDrop(true));
      const docRef = doc(db, 'data-shared', shared);
      getDoc(docRef).then((docSnap) => {
        const data = docSnap.data();
        setLoaded(data?.img);
      });
      dispatch(SetBackDrop(false));
      setLoading(false);
    };
    getData();
  }, []);

Answer 1

在这里，仅使用 async /等待：

useEffect(async () => {
    setLoading(true);
    const response = await fetch('/encrypt', {
    headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
    },
    method: 'POST',
    body: JSON.stringify({ clientId: params[1] }),
    })
    try {
      const data = await response.json();
    } catch(err) {
      dispatch(SetSnackBarMsg({ bool: true, msg: 'Cannot get data.' }));
    }
    const shared = data.data.split('_Shared_')[1];
    dispatch(SetBackDrop(true));
    const docRef = doc(db, 'data-shared', shared);
    const docSnap = await getDoc(docRef);
    setLoaded(docSnap.data?.img);
    dispatch(SetBackDrop(false));
    setLoading(false);
});

Answer 2

如果您使用等待/async 键盘，则无需使用。您可以做到这一点：

const getData = async () => {
 try{
  const response = await fetch('/encrypt', {
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    },
    method: 'POST',
    body: JSON.stringify({ clientId: params[1] }),
  });
  const result = await response.json();
  let shared = result.data.split('_Shared_')[1];
  //rest of the logic here
 }
 catch(e){
  dispatch(SetSnackBarMsg({ bool: true, msg: 'Cannot get data.' }));
 }
}

这里有更多信息：