React：数据加载后需要双击按钮才能触发电子邮件发送

Question

我有一个 React 组件，在其中获取数据并尝试在单击按钮时使用获取的数据发送电子邮件。但是，我遇到一个问题，需要单击按钮两次才能在数据加载后正确发送电子邮件。

const OrderCategoryList = () => {
  const { emailData,fetchOrderData } = useEmailData();
  const [orderData, setOrderData] = useState(null);
  const [userInfo, setUserInfo] = useRecoilState(userInfoAtom);
  const [orderID, setOrderID] = useRecoilState(takeOrderID);
  const setOrderIDType = useSetRecoilState(setOrderType);
  const setOrdername = useSetRecoilState(setOrderUsername);

  const handleOrder = async (id, status, username, orderType, email) => {
   setOrderID(id);
    setOrderIDType(orderType);
    setOrdername(username);

    await fetchOrderData();
    if (!emailData) {
      console.log("Email data could not be loaded.");
      return;
    }

    if (BOOSTER_STATUS === "order") {
      alert("You cannot take an another order.");
    } else {

        const templateParams = {
          // Assuming templateParams setup is correct
        };

        console.log('Template Params:', templateParams);
        await sendEmail(templateParams);
      } catch (error) {
        console.error('Failed to handle order:', error);
      }
    }
  };

  const sendEmail = async (templateParams) => {
    // Assuming email sending logic using emailjs is correctly set up
  };

  if (!orderData) {
    return (
      <Wrapper>
        <Container>No data available. Please relogin and try again.</Container>
      </Wrapper>
    );
  }

  return (
    <Wrapper>
      {orderData.map((item, index) => (
        <Container key={index}>
          {/* Render order items here */}
          <button onClick={() => handleOrder(item.id, item.status, item.user.username, item.orderType, item.user.email)}>
            Take Order
          </button>
        </Container>
      ))}
    </Wrapper>
  );
};

我的客户使用电子邮件数据组件

const useEmailData = () => {
  const takeOrderIDState = useRecoilValue(takeOrderID);
  const takeOrderType = useRecoilValue(setOrderType);

  const fetchOrderDataFn = async () => {
    if (takeOrderIDState === null) {
      return null;
    }

    switch (takeOrderType) {
      case "SOLO":
        return await auth
          .getSoloOrderId(takeOrderIDState)
          .then((res) => res.data);
      case "DUO":
        return await auth
          .getDuoOrderId(takeOrderIDState)
          .then((res) => res.data);
      case "NETWIN":
        return await auth
          .getNetWinsOrderId(takeOrderIDState)
          .then((res) => res.data);
      case "COACH":
        return await auth
          .getCoachOrderId(takeOrderIDState)
          .then((res) => res.data);
      default:
        return null;
    }
  };

  const {
    data: emailData,
    error: emailError,
    isLoading: dataLoading,
    refetch: refetchOrderData,
  } = useQuery({
    queryKey: ["emailData", takeOrderIDState],
    queryFn: fetchOrderDataFn,
    enabled: takeOrderIDState !== null,
  });

  return {
    emailData,
    emailError,
    dataLoading,
    fetchOrderData: refetchOrderData,
  };
};

export default useEmailData;

我认为这很可能是异步和同步问题。我已尝试一切方法来解决此问题，但我仍然需要单击两次才能发送包含数据的电子邮件。

Answer 1

import React, { useEffect, useState } from 'react';
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
import { useQuery } from 'react-query';
import { Wrapper, Container } from './styles';
import { userInfoAtom, takeOrderID, setOrderType, setOrderUsername } from './atoms';
import { auth } from './auth';

const OrderCategoryList = () => {
  const { emailData, fetchOrderData } = useEmailData();
  const [orderData, setOrderData] = useState(null);
  const [userInfo, setUserInfo] = useRecoilState(userInfoAtom);
  const [orderID, setOrderID] = useRecoilState(takeOrderID);
  const setOrderIDType = useSetRecoilState(setOrderType);
  const setOrdername = useSetRecoilState(setOrderUsername);

  const [isOrderHandled, setIsOrderHandled] = useState(false);

  useEffect(() => {
    if (isOrderHandled) {
      fetchOrderData();
      setIsOrderHandled(false);
    }
  }, [isOrderHandled, fetchOrderData]);

  const handleOrder = async (id, status, username, orderType, email) => {
    setOrderID(id);
    setOrderIDType(orderType);
    setOrdername(username);

    setIsOrderHandled(true);

    if (!emailData) {
      console.log("Email data could not be loaded.");
      return;
    }

    if (BOOSTER_STATUS === "order") {
      alert("You cannot take another order.");
    } else {
      try {
        const templateParams = {
 
        };

        console.log('Template Params:', templateParams);
        await sendEmail(templateParams);
      } catch (error) {
        console.error('Failed to handle order:', error);
      }
    }
  };

  const sendEmail = async (templateParams) => {

  };

  if (!orderData) {
    return (
      <Wrapper>
        <Container>No data available. Please relogin and try again.</Container>
      </Wrapper>
    );
  }

  return (
    <Wrapper>
      {orderData.map((item, index) => (
        <Container key={index}>
          {/* Render order items here */}
          <button onClick={() => handleOrder(item.id, item.status, item.user.username, item.orderType, item.user.email)}>
            Take Order
          </button>
        </Container>
      ))}
    </Wrapper>
  );
};

const useEmailData = () => {
  const takeOrderIDState = useRecoilValue(takeOrderID);
  const takeOrderType = useRecoilValue(setOrderType);

  const fetchOrderDataFn = async () => {
    if (takeOrderIDState === null) {
      return null;
    }

    switch (takeOrderType) {
      case "SOLO":
        return await auth.getSoloOrderId(takeOrderIDState).then((res) => res.data);
      case "DUO":
        return await auth.getDuoOrderId(takeOrderIDState).then((res) => res.data);
      case "NETWIN":
        return await auth.getNetWinsOrderId(takeOrderIDState).then((res) => res.data);
      case "COACH":
        return await auth.getCoachOrderId(takeOrderIDState).then((res) => res.data);
      default:
        return null;
    }
  };

  const {
    data: emailData,
    error: emailError,
    isLoading: dataLoading,
    refetch: refetchOrderData,
  } = useQuery({
    queryKey: ["emailData", takeOrderIDState],
    queryFn: fetchOrderDataFn,
    enabled: takeOrderIDState !== null,
  });

  return {
    emailData,
    emailError,
    dataLoading,
    fetchOrderData: refetchOrderData,
  };
};

export default OrderCategoryList;

我想看看你的 fetchOrderData 和 sendEmail 是否正确处理异步操作