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

【问题标题】：Why am I getting this infinite loop in react hooks为什么我在反应钩子中得到这个无限循环
【发布时间】：2021-06-20 03:45:47
【问题描述】：

我正在从一个模仿 API 的 JS 文件中获取数据，并有几个充当端点的方法，我在控制台日志时获取数据，但我无法理解为什么会出现无限循环使用挂钩时。是的，我搜索过类似的问题，但还是不明白。

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;

【问题讨论】：

你应该在useEffect中运行你的副作用（调用api）

标签： javascript reactjs react-hooks infinite-loop

【解决方案1】：

不鼓励在 React 中调用组件体上的函数（你不知道函数会被调用多少次）。假设您想在组件加载时获取一次数据，您可以像这样修改代码：

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;

这应该可以解决您的问题。

【讨论】：

@Rashidk 很高兴听到这个消息。祝你有美好的一天！

【解决方案2】：

因为当组件挂载或更新时，函数中的所有内容都会运行。您的 api 部分将在每次组件更新时运行，但该部分也会更改状态 -> 状态更改 -> 组件更新 -> api 运行 -> 无限循环。
您应该将该 api 调用放在 useEffect 中，并带有一个空依赖项。

【讨论】：