在 ReactJS 中显示来自状态变量的数据形成无限循环

Question

我正在尝试显示来自 API 调用的数据。应用程序的结构看起来像

MainComponent -> RefreshButton（这将获取数据）

MainComponent -> ShowData（这将显示正在获取的数据）

MainComponent 有一个状态 userData，它将存储从 API 收到的响应。现在的问题是，每当我单击按钮时，它都会进入无限渲染循环并无限次调用 API。

错误显示如下：

这是我的MainComponent-

import React, { useEffect, useState } from "react";
import RefreshButton from "./RefreshButton";
import ShowData from "./ShowData";

const MainComponent = () => {
    const [userData, setUserData] = useState();

    useEffect(() => {
        console.log(userData);
    }, [userData]);

    return (
        <div>
            <p style={{ textAlign: "center" }}>Main Component</p>

            <RefreshButton setUserData={setUserData} />
            {userData && <ShowData userData={userData} />}
        </div>
    );
};

export default MainComponent;

这是我的RefreshButton组件-

import React from "react";
import axios from "axios";

const RefreshButton = ({ setUserData }) => {
    const getData = () => {
        axios
            .get(`https://jsonplaceholder.typicode.com/todos`)
            .then((response) => {
                if (response.status === 200) setUserData(response.data);
            })
            .catch((err) => {
                console.log(err);
            });
    };

    return (
        <div className="button-container">
            <button className="fetch-data-button" onClick={() => getData()}>
                Fetch new data
            </button>
        </div>
    );
};

export default RefreshButton;

这是我的 ShowData 组件 -

import React from "react";

const ShowData = ({ userData }) => {
    console.log("Here", userData);
    return (
        <>
            {userData.map((info, idx) => (
                <div className="user-data" key={idx}>
                    {info}
                </div>
            ))}
        </>
    );
};

export default ShowData;

PS - 我是 React 的新手，找不到潜在的解决方案，有几个关于如何从 API 调用并显示它，但我想知道我在这里做错了什么。提前致谢！

Answer 1

你可能误会了无限循环错误

实际上是渲染错误，如下所示：

要修复渲染错误，只需将实际的字符串变量放入 {}

因为响应是这个对象的数组，所以你不能简单地渲染整个对象，而是需要在里面选择一个实际的字符串变量：

[{
   "userId": 1,
   "id": 1,
   "title": "delectus aut autem",
   "completed": false
}],

改成这样：

const ShowData = ({ userData }) => {
  console.log("Here", userData);
  return (
    <>
      {userData.map((info, idx) => (
        <div className="user-data" key={idx}>
          {info.title}  // <-- Put a title here.
        </div>
      ))}
    </>
  );
};

Answer 2

移除

useEffect(() => {
    console.log(userData);
},[userData])

这将在用户数据更改时重新评估组件，利兹无限地调用 showData

在 ReactJS 中显示来自状态变量的数据形成无限循环

Showing data from state variable in ReactJS forms infinite loop

javascript

setstate

reactjs

axios

react-hooks

你可能误会了无限循环错误