从服务器获取数据随机停止获取答案

【问题标题】：Fetching data from server randomly stops fetching从服务器获取数据随机停止获取
【发布时间】：2021-02-19 17:29:27
【问题描述】：

我的程序中发生了一些非常奇怪的事情。我已经 consol.logged 带有时间戳的废话，以尝试找出正在发生的事情。基本上我的程序随机停止获取数据。我已确保存在新的数据流，但我必须刷新整个页面或重新保存程序以在挂起时重新启动所有内容。最重要的是，没有错误或标志告诉我它为什么停止。我试图隔离这个问题，但它很可能与异步函数有关。这是代码....

function App() {

  const data = async() => {
    try {
        console.log('try block initiated')
        const apiResponse = await fetch(ipAddress)
        console.log(apiResponse);
        console.log("BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB")
        const responseText = await apiResponse.text();
        console.log(responseText)
        console.log("CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC")
        if (loading === true){
            setLoading(false);
        }
        console.log("DDDDDDDDDDDDDDDDDDDDDDDDDDDDDD")
        return responseText;
    } catch (error) {
        console.log('catch initiated')
        setError(true);
    }
  };
  console.log("AAAAAAAAAAAAAAAAAAAAAAA")
  try{
      console.log("EEEEEEEEEEEEEEEEEEEEEEEEEEE")
    data().then(response=>setMoisture(response));
    console.log("FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF")
  } catch(error){
    console.log('gotcha')
    setError(true);
}
  
  let value = moisture;
  console.log(value);
  count += 1;  
  console.log(count);


  return(
    <div className="App">
      <WeatherCard moisture={value}/>    
    </div>
  );
}

这是控制台在停止获取新数据之前的样子...

【问题讨论】：

有谁知道什么会导致 React js 这样做。这是一致的，因为它最终会发生，但不一致的是它似乎发生在不同的时间。有时会在 10 次数据检索后发生，有时会发生 100 次，有时会发生 276 次等......
看起来像设置状态相同的值known quirk。请参阅我在该问题中的回答。
我不太确定您在这里的预期行为是什么。如果您想轮询该 API 并不间断地获取水分更新，您可以增加计数器并将其设置为状态。这将确保触发下一轮重新渲染。否则，如果您 setMoisture 具有相同的值，它将停止。奇怪的日志是因为上面提到的怪癖，有点欺骗你相信设置相同的状态值会触发重新渲染。不，不会。
这很有趣，但是，我的解决方案奏效了。它曾经在 5 分钟内停止渲染，昨天运行了 12 个小时，没有任何问题。我有点困惑为什么这是一个问题，因为我肯定连续多次获得相同的值并且它并没有停止反应。无论哪种方式，我都很高兴它正在工作。

标签： javascript reactjs asynchronous fetch-api

【解决方案1】：

这是一个可能的解决方案。经过许多头痛和研究异步功能。我认为这会奏效。我打算让它运行一整夜，看看它是否会被赶上，但到目前为止，这是解决方案......

const data = async() => {
try {
    const apiResponse = await fetch(ipAddress)
    const responseText = await apiResponse.text();
    console.log("CCCCCCCCCCCCCCCCCCC");
    console.log(responseText);
    if (loading === true){
        setLoading(false);
    }
    data().then(response=>setMoisture(response));
    return responseText;
} catch (error) {
    console.log("EEEEERRRRRRRRRROOOOOOOOOOORRRRRRRRRRRR")
    setError(true);
    }   
};
console.log("AAAAAAAAAAAAAAAAAAAA");
if (moisture === "initialState"){
    data().then(response=>setMoisture(response));
}else{
    console.log("QQQQQQQQQQQQQQQQQQQQQQQQ")
}

这是我更改的内容...我创建了一个名为“initialSate”的初始状态，如果变量是这个值，它会运行异步函数。然后我再也不会在 ASYNS 自身之外再次调用这个异步。相反，我称自己为就在从函数返回值之前。这是有效的，因为我的程序在异步函数运行时正在运行。但是，程序对自身是连续的，异步是对自身连续的。它们不是连续的。所以，异步函数现在只有在异步函数完成第一次运行后才会再次调用。同时我的程序的其余部分正在运行。在我认为它被捕获之前，因为我的程序试图在它第一次完成之前调用异步函数。这是一个纯粹的猜测，因为我无法证明这一点，但这是有道理的。如果这个通宵运行失败。我将从解决方案中提取它。否则，我认为这会起作用。手指交叉！

【讨论】：