clearInterval не очищается при установке состояния в функциональном компоненте реакции - PullRequest
Новая
       20

clearInterval не очищается при установке состояния в функциональном компоненте реакции

0 голосов
/ 09 января 2020

Надеюсь, вы мне поможете.

Извините за код, который я удалил из исходного файла, чтобы сделать его более читабельным для вас. Я постараюсь объяснить, как я не знаком с React.

Сначала мне нужно получить идентификатор сеанса, чтобы иметь возможность получать сообщения. Я получаю идентификатор сессии в порядке. 

const retrieveSessionId = async () => {
    try {
        const response = await axios({
            method: 'get',
            url: 'URLGOESHERE'
        })
        const sessionId = response.data['session_id']

        postsPullPoll = setInterval(()=> retrievePosts(sessionId), 1000);

    } catch (error) {
        console.log(error);
        return false;
    }
};
retrieveSessionId();

Затем мне нужно получить свои сообщения, используя этот идентификатор сессии. Сначала он возвращает статус 202 , который в этом API означает, что сеанс создан, но я должен продолжать опрос, чтобы получить статус 200 . Поэтому я использовал setInterval для опроса постов, который затем возвращает статус 200 , как только это происходит, я получаю свои сообщения в порядке. 

const retrievePosts = async (sessionId) => {
    try {
        const response = await axios({
            method: 'get',
            url: 'URLGOESHERE'

        })
        const postsPullStatus = response.status

        if(postsPullStatus == 202) { // created session
            if(postsPullPollCounter >= 50){

                clearInterval(postsPullPoll);
            }
            postsPullPollCounter++;
        }else {
            console.log(postsData)
            setPostPullStatus({posts: postsData, isLoading: false});              
            clearInterval(postsPullPoll);
        }
    } catch (error) {
        console.log(error);
        return false;
    }
};

I тогда Мне нужно вывести эти сообщения на мой HTML, поэтому мне сначала нужно сохранить их в состоянии. Но когда я пытаюсь установить состояние, мой clearInterval внезапно перестает работать, и интервал продолжается, даже если он получает 200 , и хотя у меня есть clearInterval если это не 202 .

У меня также есть isLoading в состоянии явно показывать что-то еще в HTML, пока API загружает мои данные.

Я пытался использовать UseRef и UseEffect , но я бы подумал, если это решение, я использовал их неправильно.

Надеюсь, это имеет смысл. Вот полный код, чтобы помочь: 

import React, { useState, useContext, useRef, useEffect } from 'react'
import axios from 'axios';

export default () => {

const { isLoading, posts } = useState({});
const [postPullStatus, setPostPullStatus] = useState({
    posts: [],
    isLoading: true
});

let postsPullPoll = '',
    postsPullPollCounter = '';

const retrieveSessionId = async () => {
    try {
        const response = await axios({
            method: 'get',
            url: 'URLGOESHERE'
        })
        const sessionId = response.data['session_id']

        postsPullPoll = setInterval(()=> retrievePosts(sessionId), 1000);

    } catch (error) {
        console.log(error);
        return false;
    }
};
retrieveSessionId();

const retrievePosts = async (sessionId) => {
    try {
        const response = await axios({
            method: 'get',
            url: 'URLGOESHERE'

        })
        const postsPullStatus = response.status

        if(postsPullStatus == 202) { // created session
            if(postsPullPollCounter >= 50){

                clearInterval(postsPullPoll);
            }
            postsPullPollCounter++;
        }else {
            console.log(postsData)
            setPostPullStatus({posts: postsData, isLoading: false});              
            clearInterval(postsPullPoll);
        }
    } catch (error) {
        console.log(error);
        return false;
    }
};

return (
    <div>
    {!isLoading ? (
      posts.map(post => {
        <span>{post.title}</span>
      })
    ) : (
      <p>Loading...</p>
    )}
  </div>
);
};
...