同步 useEffect 请求答案

【问题标题】：Synchronous useEffect requests同步 useEffect 请求
【发布时间】：2021-06-25 23:55:38
【问题描述】：

我有一个 useEffect，它在页面加载时获取数据，并且我试图在收到来自初始调用的 JSON 对象的属性后立即添加另一个获取。有 2 个 useEffects 被认为是一种好的做法还是我应该以不同的方式来做？

const [account, setAccount] = useState({});
const [billing, setBilling] = useState({});

useEffect(() => {
  const fetchAccountData = async () => {
    const rawRes = await fetch(`/customers/${customerId}`);
    const res = await rawRes.json();
    setAccount(res);
  };
  fetchAccountData();
}, []);

我试图拥有一个做一件事的函数，所以我避免将第二个 useEffect 的函数添加到第一个函数中。这是我的方法

useEffect(() => {
  const fetchAccountData = async () => {
    const rawRes = await fetch(`/customers/${customerId}`);
    const res = await rawRes.json();
    setAccount(res);
  };
  fetchAccountData();
}, []);

useEffect(() => {
  if (accountData.endDate) {
    const fetchBillingData = async () => {
      const rawRes = await fetch(`/customers/${customerId}/billing`);
      const res = await rawRes.json();
      setBilling(res);
    };
  fetchBillingData();
}, [accountData.endDate]);

【问题讨论】：

标签： reactjs use-effect

【解决方案1】：

您可以这样做，因为您的函数是异步的并且您正在使用等待，这样编写它会达到您想要的结果：trying to add another fetch as soon as I receive a property from the initial call's JSON object

useEffect(() => {
  const fetchAccountData = async () => {
    const rawRes = await fetch(`/customers/${customerId}`);
    const res = await rawRes.json();
    setAccount(res);

    const rawRes2 = await fetch(`/customers/${customerId}/billing`);
    const res2 = await rawRes.json();
    setBilling(res2);
  };
  fetchAccountData();
}, []);

【讨论】：