"useEffect 运行时有条件地渲染"

Question

我正在制作一个应用程序，我在一个屏幕上调用 2 个 APIS。 我想在屏幕第一次渲染时调用第一个，并在完成后设置对某些状态值的响应我开始倒计时功能大约 3 分钟，当倒计时结束时，我使用数据调用第二个 API从第一个获取并再次重复相同的过程以进行另一个 cont down 并重新渲染屏幕，但我不想每次重新渲染屏幕时都运行第一个 API。 目前，我没有代码，所以希望你理解我的问题，任何帮助将不胜感激。

Answer 1

您可以使用闭包概念在同一进程中处理 2 个不同的操作。

这是一个示例（依赖关系是触发器，可以是超时内的状态值或任何内容）：

import { useEffect } from 'react';


// First fetch function
const firstFetch=async()=>{};
// Second fetch function
const anotherFetch=async()=>{};

// An IIFE to handle the closure easily
const fetchFunction = (()=>{
  let firstTimeCall=true;

  // fetchFunction will be the below returned function with a closure(firstTimeCall)
  return ()=>{
    if(firstTimeCall){
      firstFetch();
      firstTimeCall=false;
    }else{
      anotherFetch();
    }
  }

})();

const MyComponent = () => {
  useEffect(() => {
    fetchFunction()
  }, [dependency]);

  return (....)
};

Answer 2

所以你有 2 个 API 调用。 第一个在屏幕第一次渲染时被调用，并且再也不会出现。 第二个取决于第一个的数据，每 3 分钟调用一次。

根据传递给它们的依赖数组调用效果（例如，一个空数组运行一次​​）。 所以我会以此为基础编写代码并执行以下操作：

//  keeps track of whether the first api has been called
const [calledFirstApi, setCalledFirstApi] = useState(false);
// data from first api call will be stored here
const [data, setData] = useState({});
// store secondApi data here if it needs to trigger a re-render
const [otherData,setOtherData] = useState({});

const interval = useRef(null);
const time = 60*1000*3;

//dont know if your api is asynchronous or not
const callFirstApi = async ()=>{
  let apiData = await firstApi();
  setData(apiData);
}

const callSecondApi = async ()=>{
  //the second api call uses data from the first
  let apiData2 = await secondApi(data);
  setOtherData(apiData2)
}

// effect for first render
useEffect(()=>{
  callFirstApi();
  // mark api called
  setCalledFirstApi(true);
},[]);

//effect for when calledFirstApi changes
useEffect(()=>{
  // if false, do nothing/ return
  if(!calledFirstApi)
    return
  // when true start interval
  interval.current = setInterval(()=>{
    callSecondApi()
  }
  ,time)
  // the return of an effect is a cleanup function
  // (function will run when unmounting component)
  return ()=>clearInterval(interval.current);
}),[calledFirstApi]);