Реагируйте на хуки для управления вызовом API с помощью таймера - PullRequest
Новая
       24

Реагируйте на хуки для управления вызовом API с помощью таймера

1 голос
/ 05 июля 2019

Мне нужно выполнить вызов API извлечения, который возвращает URL-адрес, что-то сделать с возвращенным URL-адресом, а затем обновить его через 60 секунд. Это то, чего я мог бы легко достичь без хуков, но я бы хотел решение для хуков.

ВАЖНО : я не собираюсь рефакторинг этого для нескольких компонентов или создания пользовательских хуков для вызова таймера или API.

РЕДАКТИРОВАТЬ : Вопрос в том, является ли это правильным способом обработки таймера в среде перехвата? Есть ли лучший способ? 

import React, { useState, useEffect } from 'react'
import { post } from 'utils/requests'

const FetchUrl = ({ id }) => {
  const [url, setUrl] = useState('')
  let [count, setCount] = useState(0)

  const tick = () => {
    let newCount = count < 60 ? count + 1 : 0
    setCount(newCount)
  }

  useEffect(() => {
    const timer = setInterval(() => tick(), 1000)

    if (count === 0) {
      post('/api/return-url/', { id: [id] })
        .then(res => {
          if (res && res.content) {
            setUrl(res.content.url)
          }
        })
    }

    return () => clearInterval(timer)
  })

  return url ? (
    <span className="btn sm">
      <a href={url} target="_blank" rel="noopener noreferrer">go</a>
    </span>
  ) : null
}

export default FetchUrl

1 Ответ

1 голос
/ 05 июля 2019

Посмотрите, подходит ли это вам.

Я бы разделил это на 2 useEffect(). Один запускается после 1-го рендера (аналогично componentDidMount) для установки таймера. И другие, чтобы сделать вызов API на основе значения счетчика.

Примечание: Я использовал ref только для того, чтобы можно было отличить один вызов API от другого и добавить к нему номер.

См. Фрагмент ниже: 

const FetchUrl = ({ id }) => {
  const [url, setUrl] = React.useState('');
  const [count, setCount] = React.useState(0);
  const someRef = React.useRef(0);

  const tick = () => {
    //let newCount = count < 60 ? count + 1 : 0
    setCount((prevState) => prevState < 60 ? prevState +1 : 0);
  }
  
  function mockAPI() {
    return new Promise((resolve,request) => {
      someRef.current = someRef.current + 1;
      setTimeout(()=>resolve('newData from API call ' + someRef.current),1000);
    });
  }

  React.useEffect(() => {
    const timer = setInterval(() => tick(), 100);
    return () => clearInterval(timer);
  });
  
  React.useEffect(() => {
    if (count === 0) {
      /*post('/api/return-url/', { id: [id] })
        .then(res => {
          if (res && res.content) {
            setUrl(res.content.url)
          }
        })
      */
      mockAPI().then((data) => setUrl(data));
    }
  },[count]);

  return url ? (
    <span className="btn sm">
      <div>{count}</div>
      <a href={url} target="_blank" rel="noopener noreferrer">{url}</a>
    </span>
  ) : null
}

ReactDOM.render(<FetchUrl/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>
...