为什么我在反应钩子中得到这个无限循环

Question

I am fetching from a JS file that mimics an API and has a couple of methods that act as endpoints, I am getting the data when I console log but I can't wrap my head around why I am getting an infinite loop when using hooks. Yes, I have searched for similar questions but I still don't understand.

 import React, { useEffect, useState } from "react"; import { api } from "../api/api.min.js"; // import axios from "axios"; function NonsenseComponent() { const [data, setData] = useState(); console.log(data); // function getItems(items) { // // console.log(items, " items finns"); // setData(items); // } // console.log("darn"); const x = api.XMLHttpRequest(); x.onreadystatechange = function () { if (x.readyState == 4 && x.status == 200) { var item = JSON.parse(this.responseText); var items = []; // init array to store contacts for (var i = 0; i < item.length; i++) { items.push({ date: item[i].date, text: item[i].text, id: item[i].id, }); } // setData(items); } }; x.open("GET", "/getitems", true); x.send(); useEffect(() => { // setData({}); }, []); return ( <div> {/* {data.map((item) => ( <ul key={item[0].id}> <li>{item[0].date}</li> </ul> ))} */} </div> ); } export default NonsenseComponent;

Answer 1

Calling function on component body in React is discouraged (you don't know how many times function will be called). Lets say you want to fetch data once on component load, you could modify you code like this:

import React, { useEffect, useState } from "react";
import { api } from "../api/api.min.js";
// import axios from "axios";

function NonsenseComponent() {
  const [data, setData] = useState({}); //<-- default value for data is {}
  console.log(data);

  // function getItems(items) {
  //   // console.log(items, " items finns");
  //   setData(items);
  // }
  // console.log("darn");

  useEffect(() => {
    const x = api.XMLHttpRequest();
    x.onreadystatechange = function () {
    if (x.readyState == 4 && x.status == 200) {
      var item = JSON.parse(this.responseText);
      var items = []; // init array to store contacts
      for (var i = 0; i < item.length; i++) {
        items.push({
          date: item[i].date,
          text: item[i].text,
          id: item[i].id,
        });
      }

      setData(items); // <-- here you can set your state
    }
  };
  x.open("GET", "/getitems", true);
  x.send();
  }, []);

  return (
    <div>
     
      {data.map((item) => (
        <ul key={item[0].id}>
          <li>{item[0].date}</li>
        </ul>
      ))}
    </div>
  );
}

export default NonsenseComponent;

This should solve your problem.

Answer 2

Because everything in your function will run when the component get mount or update. Your api part will run everytime the component update but that part also change the state -> the state changed -> component update -> api run -> infinite loop.
You should put that api call inside useEffect with an empty dependency.