javascript - ReactJS fetch causes infinite loop - Stack Overflow

admin管理员组

文章数量:1327665

I have two apps one of them is NodeJS listening 5000's port and the other is ReactJS listening 3000's port.

I can return JSON from NodeJS like this (http://localhost:5000/api/28/10/2018):

{
  "date": "28.10.2018",
  "across": [
    {"no": "1", "text": "Warning about an ining projectile"},
    {"no": "5", "text": "Rapper/producer behind Beats headphones"},
    {"no": "6", "text": "Noble gas below xenon on the periodic table"},
    {"no": "7", "text": "Setting for much of \"Finding Nemo\""},
    {"no": "8", "text": "Looney Tunes character who says \"Th-th-th-that's all, folks!\""}
  ],
  "down": [
    {"no": "1", "text": "Harry's enemy at Hogwarts"},
    {"no": "2", "text": "Milk dispenser"},
    {"no": "3", "text": "Sound from a frog"},
    {"no": "4", "text": "Country music star Chesney"},
    {"no": "5", "text": "The shape of water?"}
  ],
  "cells": ["-1","1","2","3","4","5","0","0","0","0","6","0","0","0","0","7","0","0","0","0","8","0","0","0","0"]
}

I want to display this data with ReactJS but when I try fetch method it creates endless loop. How to solve this?

My ReactJS code:

drawTable = (props) => {
  /* Some if-elseif that is not related to the question */
  else {
    // here props.type get an array that hold input from terminal
    let day, month, year;
    day = props.type[1];
    month = props.type[2];
    year = props.type[3];

    if (day === undefined || month === undefined || year === undefined) {
      console.log("Please use get-old mand properly!");
      console.log("Usage:\nget-old day month year");
      console.log("Example:\nget-old 28 10 2018");
      return idle;
    }
    // If arguments defined go fetch
    let url = `http://localhost:${REACT_PORT}/old/${day}/${month}/${year}`;
    fetch(url)
    .then((response) => response.json())
    .then((data) => {
      this.setState({data: data});
    })
    .catch((error) => {
      console.error(error);
    });
    console.log(this.state.data);
  }
}

This log many JSON object.

I have two apps one of them is NodeJS listening 5000's port and the other is ReactJS listening 3000's port.

I can return JSON from NodeJS like this (http://localhost:5000/api/28/10/2018):

{
  "date": "28.10.2018",
  "across": [
    {"no": "1", "text": "Warning about an ining projectile"},
    {"no": "5", "text": "Rapper/producer behind Beats headphones"},
    {"no": "6", "text": "Noble gas below xenon on the periodic table"},
    {"no": "7", "text": "Setting for much of \"Finding Nemo\""},
    {"no": "8", "text": "Looney Tunes character who says \"Th-th-th-that's all, folks!\""}
  ],
  "down": [
    {"no": "1", "text": "Harry's enemy at Hogwarts"},
    {"no": "2", "text": "Milk dispenser"},
    {"no": "3", "text": "Sound from a frog"},
    {"no": "4", "text": "Country music star Chesney"},
    {"no": "5", "text": "The shape of water?"}
  ],
  "cells": ["-1","1","2","3","4","5","0","0","0","0","6","0","0","0","0","7","0","0","0","0","8","0","0","0","0"]
}

I want to display this data with ReactJS but when I try fetch method it creates endless loop. How to solve this?

My ReactJS code:

drawTable = (props) => {
  /* Some if-elseif that is not related to the question */
  else {
    // here props.type get an array that hold input from terminal
    let day, month, year;
    day = props.type[1];
    month = props.type[2];
    year = props.type[3];

    if (day === undefined || month === undefined || year === undefined) {
      console.log("Please use get-old mand properly!");
      console.log("Usage:\nget-old day month year");
      console.log("Example:\nget-old 28 10 2018");
      return idle;
    }
    // If arguments defined go fetch
    let url = `http://localhost:${REACT_PORT}/old/${day}/${month}/${year}`;
    fetch(url)
    .then((response) => response.json())
    .then((data) => {
      this.setState({data: data});
    })
    .catch((error) => {
      console.error(error);
    });
    console.log(this.state.data);
  }
}

This log many JSON object.

• javascript
• reactjs

Share Improve this question Follow edited Nov 4, 2018 at 3:13 Trent 4,31655 gold badges2727 silver badges4646 bronze badges asked Nov 3, 2018 at 22:23 Mehmet AliMehmet Ali 36333 silver badges1616 bronze badges 6

• Where do you call the drawTable() function? – Jayce444 Commented Nov 3, 2018 at 22:28
• @Jayce444 I call the function in render,return method like this: {this.drawTable(this.props)} – Mehmet Ali Commented Nov 3, 2018 at 22:29
• 7 You call drawTable in the render method, which causes a fetch request. When this pletes, you put the response in state with setState which causes your ponent to re-render, and it continues like this indefinitely. You could instead get the data in ponentDidMount and ponentDidUpdate. – Tholle Commented Nov 3, 2018 at 22:35
• @Tholle thank you very much for the answer! I totally get it but I'm still not able to implement it in my code. How can I implement that in the code? – Mehmet Ali Commented Nov 3, 2018 at 22:40
• Read reactjs/docs/react-ponent.html#render – Gabriele Petrioli Commented Nov 3, 2018 at 22:43

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 6

You call drawTable in the render method, which causes a fetch request. When this pletes, you put the response in state with setState which causes your ponent to re-render, and it continues like this indefinitely.

You could instead get the data in ponentDidMount and ponentDidUpdate and just use the data in the render method.

Example

class MyComponent extends React.Component {
  // ...

  ponentDidMount() {
    this.fetchData();
  }

  ponentDidUpdate(prevProps) {
    const [, prevDay, prevMonth, prevYear] = prevProps.type;
    const [, day, month, year] = this.props.type;

    if (prevDay !== day || prevMonth !== month || prevYear !== year) {
      this.fetchData();
    }
  }

  fetchData = () => {
    const [, day, month, year] = this.props.type;
    const url = `http://localhost:${REACT_PORT}/old/${day}/${month}/${year}`;

    fetch(url)
      .then(response => response.json())
      .then(data => {
        this.setState({ data });
      })
      .catch(error => {
        console.error(error);
      });
  };

  render() {
    // ...
  }
}

本文标签： javascriptReactJS fetch causes infinite loopStack Overflow