React UseState hook causing infinite loop

Karan

I am using ReactJs to grab an RSS news feed every 5 seconds to convert it into a JSON string to render it on the webpage. I am using both useEffect and useState hook for this purpose as I am passing the JSON string in the useState hook variable, however. It kind of works but it produces an infinite loop. I have searched through the fixes provided in stack overflow but I couldn't find the exact problem. Here is my code snippet.'

import React, {useEffect, useState} from 'react';
import Carousel from 'react-bootstrap/Carousel';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import {getNews} from "../../actions/news";
import Parser from 'rss-parser';

const NewsCarousel = ({getNews, news: {news, loading} }) => {

    const [getFeed, setFeed] = useState({
        feed: ''
    });

    useEffect(() => {
        const interval = setInterval(() => {
            getNews();
        }, 5000);
        return () => clearInterval(interval);
    }, [getNews]);


    const { feed } = getFeed;
    const newsFeed = feed => setFeed({ ...getFeed, feed: feed });

    let parser = new Parser();
    parser.parseString(news, function(err, feed){
        if (!err) {
            newsFeed(feed);
        } else {
            console.log(err);
        }

    });

    console.log(feed);
    return (
        <div className="dark-overlay">
        </div>
    );
};


NewsCarousel.propTypes = {
    getNews: PropTypes.func.isRequired,
    news: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
    news: state.news
});

export default connect(mapStateToProps, {getNews}) (NewsCarousel);

Its when I console.log my feed variable that's when I see in the console the infinite logs. Below is my getNews Action

import axios from 'axios';
import { GET_NEWS, NEWS_FAIL } from "./types";

export const getNews = () => async dispatch => {
  try{
     const res = await axios.get('https://www.cbc.ca/cmlink/rss- 
     topstories');
     dispatch({
        type: GET_NEWS,
        payload: res.data
     })
} catch(err) {
    dispatch({
        type: NEWS_FAIL,
        payload: { msg: err}
    })
}
};
Amit Chauhan

You need to parse your news only when there is a change in new props. Add another useEffect with news as a dependency so it will be called when the news changes and then update your state there.

import React, {useEffect, useState} from 'react';
import Carousel from 'react-bootstrap/Carousel';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import {getNews} from "../../actions/news";
import Parser from 'rss-parser';

const NewsCarousel = ({getNews, news: {news, loading} }) => {

    const [getFeed, setFeed] = useState({
        feed: ''
    });

    useEffect(() => {
        const interval = setInterval(() => {
            getNews();
        }, 5000);
        return () => clearInterval(interval);
    }, [getNews]);

    useEffect(() => {
      const newsFeed = feed => setFeed({ ...getFeed, feed: feed });

      const parser = new Parser();
      parser.parseString(news, function(err, feed){
        if (!err) {
            newsFeed(feed);
        } else {
            console.log(err);
        }
      });
    }, [news]);

    return (
        <div className="dark-overlay">
        </div>
    );
};


NewsCarousel.propTypes = {
    getNews: PropTypes.func.isRequired,
    news: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
    news: state.news
});

export default connect(mapStateToProps, {getNews}) (NewsCarousel);

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

"Infinite loop" causing unreachable code

分類Dev

Express + Angular routing causing infinite loop + crash

分類Dev

Infinite loop when pushing into array using UseState()?

分類Dev

Adding a key-value pair to an object inside loop using React useState hook

分類Dev

ReactJS - prevState in the new useState React hook?

分類Dev

React-hook-form on submit and useState issue

分類Dev

Reactjs router onEnter hook authentication cause infinite loop

分類Dev

React useState async updating and for-loop

分類Dev

React simple fetch program run into an infinite loop

分類Dev

Infinite loop when using react hooks

分類Dev

React useEffect with property as dependency makes infinite loop

分類Dev

create custom hook to override useState() hook and merge object properties (React JS)

分類Dev

Why is scanf causing infinite forlool

分類Dev

Why does this create an infinite render loop with React hooks?

分類Dev

Why does setState cause my React app go into infinite loop?

分類Dev

React Hook useStateがconstを使用し、letしない理由

分類Dev

送信およびuseStateの問題に関するReact-hook-form

分類Dev

React useState hook affecting default variable used in state regardless spread operators, Object.assign and etc

分類Dev

React Hooks: useState updater function: Why does this hook remove the object upon drag?

分類Dev

Array is not being updated in useState hook?

分類Dev

React giving me Error: Too many re-renders. React limits the number of renders to prevent an infinite loop

分類Dev

Stuck on infinite if loop

分類Dev

Running into infinite loop with scanf

分類Dev

Prolog infinite loop issue

分類Dev

Regex Infinite Loop

分類Dev

Singleton going into an infinite loop

分類Dev

Memory leak in infinite loop

分類Dev

While loop creating infinite loop

分類Dev

Correct way of using useState hook on radio buttons

Related 関連記事

  1. 1

    "Infinite loop" causing unreachable code

  2. 2

    Express + Angular routing causing infinite loop + crash

  3. 3

    Infinite loop when pushing into array using UseState()?

  4. 4

    Adding a key-value pair to an object inside loop using React useState hook

  5. 5

    ReactJS - prevState in the new useState React hook?

  6. 6

    React-hook-form on submit and useState issue

  7. 7

    Reactjs router onEnter hook authentication cause infinite loop

  8. 8

    React useState async updating and for-loop

  9. 9

    React simple fetch program run into an infinite loop

  10. 10

    Infinite loop when using react hooks

  11. 11

    React useEffect with property as dependency makes infinite loop

  12. 12

    create custom hook to override useState() hook and merge object properties (React JS)

  13. 13

    Why is scanf causing infinite forlool

  14. 14

    Why does this create an infinite render loop with React hooks?

  15. 15

    Why does setState cause my React app go into infinite loop?

  16. 16

    React Hook useStateがconstを使用し、letしない理由

  17. 17

    送信およびuseStateの問題に関するReact-hook-form

  18. 18

    React useState hook affecting default variable used in state regardless spread operators, Object.assign and etc

  19. 19

    React Hooks: useState updater function: Why does this hook remove the object upon drag?

  20. 20

    Array is not being updated in useState hook?

  21. 21

    React giving me Error: Too many re-renders. React limits the number of renders to prevent an infinite loop

  22. 22

    Stuck on infinite if loop

  23. 23

    Running into infinite loop with scanf

  24. 24

    Prolog infinite loop issue

  25. 25

    Regex Infinite Loop

  26. 26

    Singleton going into an infinite loop

  27. 27

    Memory leak in infinite loop

  28. 28

    While loop creating infinite loop

  29. 29

    Correct way of using useState hook on radio buttons

ホットタグ

アーカイブ