React Strict 模式是否会导致我的组件调用我的 API 的次数比平时多？

Question

我是 React 的初学者，我尝试每 3 秒调用一次此 API，以获取国际空间站坐标并将它们呈现到每次调用的屏幕上。所以我使用 setTimeout() 获取 API 坐标，更新 'coords' 状态变量，然后使用 useEffect 将 ref 'coordRef' 更新为这些值，然后我将其传递给子组件 'TomTomSearch'，以用作嗯。

问题是，当我在严格模式下运行它时，它会进行许多 API 调用，然后最终会产生一个永无止境的 API 调用流，正如运行时的多个控制台日志所看到的那样，当我在没有严格模式的情况下运行它时模式标签，它只调用一次 setTimeout() 调用。我使用的 API 限制为 1 次调用/秒，并且最终在严格模式下总是给我一个 429 错误。

145 FetchISS.js:21 fetched //(console logged 145 times in 15 seconds)
FetchISS.js:17 
GET https://api.wheretheiss.at/v1/satellites/25544 
429 (Too Many Requests)

我只需要知道这是否只是使用严格模式的副作用，还是我实际上只是以错误的方式执行此操作。此外，对于您看到的任何丑陋代码的任何指针或建议将不胜感激！

function FetchISS() {
  const [ coords, setCoords] = useState({lat: null, lon: null});
  const coordRef = useRef({lat: null, lon: null});

  useEffect(
    () => {
      coordRef.current = {lat: coords.lat, lon: coords.lon};
    }
  ,[coords]);

  function fetchISS() {
    const iss_API = 'https://api.wheretheiss.at/v1/satellites/25544';
    fetch(iss_API)
    .then(results => results.json())
    .then(results => {
      setCoords({lat: results.latitude, lon: results.longitude});
      console.log('fetched');
    }).catch(err => {
      console.log(err.message);
    })
  }

  setTimeout(() => fetchISS(), 3000);

  return(
    <div>
      { coordRef.current.lat !== null && coordRef.current.lon !== null ? 
      <TomTomSearch coords={coords} /> : null } 
    </div>
  )
}

Answer 1

您正在组件中创建一个无限循环的获取。当 API 响应时，您的组件会重新呈现，并且由于您的 setTimeout 调用不在 useEffect 调用内，因此每次呈现组件时都会运行它，从而创建一个循环。

请参阅this question，了解如何在 react 中每隔几秒调用一次函数。