我如何使用效果一次，但仍使用状态，并使用react钩子

Question

我只是尝试在安装/卸载上设置一个间隔，但允许回调从状态中具有一个变量。

我有这样的代码：

const [cachedData, setCachedData] = useState(false);
async function refreshData() {
  const data = await axios('http://www.example.com/');
  setCachedData(data);
}
useEffect(() => {
  let interval;
  async function fetch() {
    await refreshData();
    interval = setInterval(refreshData,5000);
    console.log('set interval to', interval)
  }
  fetch();
  return () => {
    console.log('clearing interval', interval);
    clearInterval(interval);
  }
}, []);

我正在遇到捕获22。useEffect的第二个论点说明了哪些变量要注意。我已经阅读了一个空阵列，因此只能在任何状态更新中进行安装/卸载。我发现这样做的问题是，这意味着refreshData无法访问cachedData，因此我不知道我有有效的数据(以避免使用XHR请求一段时间(。如果我将cachedData传递到useEffect的第二个参数中，它将具有变量，但运行的时间超出。不确定解决这个问题。

我应该注意，如果我将 cachedData传递给第二个arg，而 console.log则通过清除和设置间隔，我的控制台会输出类似的东西：

clearing interval undefined
set interval to 5
set interval to 7

因此，它似乎可以运行卸载，然后效果两次，而无需再次清除。这会引起双轴电话。

Answer 1

您可以使用REF在当前的cachedData上获得以下内容：

const [cachedData, setCachedData] = useState(false);
const cachedDataRef = useRef(cachedData);
useEffect(() => {
  // Update ref in effect so that render has no side effects.
  cachedDataRef.current = cachedData;
}, [cachedData]);
useEffect(() => {
  async function refreshData() {
    if (cachedDataRef.current) {
      // do something different
    } else {
      const data = await axios('http://www.example.com/');
      setCachedData(data);
    }
  }
  let interval;
  async function fetch() {
    await refreshData();
    interval = setInterval(refreshData,5000);
    console.log('set interval to', interval)
  }
  fetch();
  return () => {
    console.log('clearing interval', interval);
    clearInterval(interval);
  }
}, []);