如何在间隔后渲染反应功能组件

Question

  useEffect(() => {
    const url = `https://......com/..../${id}`;
    fetch(url)
      .then((res) => res.json())
      .then((data) => {
        console.log(serviceDetail);
        setServiceDetail(data);
      });

注意：我希望它在一定时间后渲染它，比如每 5 秒。（或多或少）

Answer 1

试试这个很有用的代码

function App() {
  const [serviceDetail, setServiceDetail] = useState(0);

  const handleApiCall = () => {
    const url = 'https://......com/..../${id}';
    fetch(url).then((res) => res.json()).then((data) => {
      console.log(serviceDetail); setServiceDetail(data);
    });
  }
  useEffect(() => {
    handleApiCall(); //for call api init time 
   
   const interval = setInterval(() => {
      handleApiCall(); // call api after 5 seconds
    }, 5000);

    return () => clearInterval(interval); // clear interval after component unmounts.
  });

  return (
    <div>

    </div>
  );
}
export default App;

Answer 2

（当前）接受的答案遗漏了一个重要细节。当组件卸载时，间隔将保持运行。要阻止它，您需要 clearInterval。另一个错误是 useEffect 在没有依赖项的情况下被调用。这里我们使用 useCallback 生成一个函数，该函数只会在 id 更新时更新。回调和 id 都作为依赖项传递给 useEffect -

const [data, setData] = useState(...)

const update = useCallback(id =>
  fetch(`http://.../${id}/`)
    .then(r => r.json())
    .then(setData),
  [id]
)

useEffect(() => {
  const t = setInterval(_ => update(id), 5000)
  return () => clearInterval(t)
}, [update, id])

在 related Q&A 中，我们引入了一个自定义 useInterval 挂钩，它使组件可以轻松地使用基于间隔的状态。请参阅 post 以获取功能齐全的代码演示。

如何在间隔后渲染反应功能组件

how to render react functional component after interval

functional-programming

render

intervals

reactjs

react-hooks