вызовы setInterval в функциональных компонентах с использованием хуков в ReactJS

Question

В приложении ReactJs, setInterval используется в демоверсии ниже. В настоящее время он ожидает 10 секунд даже при начальной нагрузке, вместо этого он должен немедленно позвонить, а через 10 секунд он должен снова позвонить. Как мне этого добиться?

const callApiAfterOneSec = async () => {
    await axios.get(`https://jsonplaceholder.typicode.com/posts/${id}`)
          .then(res => {
              setLoading(false);
              setPost(res.data);
          })
          .catch(err => {
              setLoading(false);
              console.log(err);
          });
};

useEffect(() => {
    const interval = setInterval(callApiAfterOneSec, 10000);
    return () => {
        clearInterval(interval);
    };
}, [post]);

Answer 1

Попробуйте добавить еще один useEffect(), сработал только один раз:

useEffect(() => {
  callApiAfterOneSec();
}, []);

Answer 2

Вы можете использовать это как компонент класса

class App extends React.Component {

      interval;
      constructor() {
        super()
        this.state = {
          data: {}
        }
      }
      componentDidMount() {
        this.loadData();
        this.interval = setInterval(this.loadData, 5000);
      }

      componentWillUnmount() {
        clearTimeout(this.interval);
      }

      async loadData() {
        try {
          const res = await fetch('https://jsonplaceholder.typicode.com/posts/1');
          await res.json().then(res => {

            this.setState({
              data: res
            })
          })
        } catch (e) {
          console.log(e);
        }
      }

      render() {
        return (
          <div>
            <ul>
              <li>UserId : {this.state.data.userId}</li>
              <li>Title : {this.state.data.title}</li>
              <li>Body : {this.state.data.body}</li>
            </ul>
          </div>
        );
      }

    }
    render(<App />, document.getElementById('root'));

Как уже упоминалось @xadm, вы можете использоватьEffect два раза согласно требованию простого исправления

useEffect(() => {
  callApiAfterOneSec();
}, []);

Answer 3

Это просто взлом, который может решить вашу проблему.

const [rendered, setRendered] = useState(false);

useEffect(() => {
  let interval = null;
  if(rendered) interval =  setInterval(callApiAfterOneSec, 10000)
  setRendered(true);

  return () => {
    clearInterval(interval)
  }
}, [post, rendered])