React中使用state变量展示接口数据触发无限渲染循环问题

问题原因 #

1. 核心错误出在ShowData组件：你直接将接口返回的todo对象作为React子元素渲染，React不支持直接渲染普通JS对象，会抛出Objects are not valid as a React child错误，和你截图中的报错信息完全匹配。
2. 开发环境下React遇到渲染错误后会尝试重新渲染组件恢复，每次重渲染都会触发同样的渲染错误，形成无限循环，控制台日志持续刷新，看起来就像API被无限调用。

修复方案 #

1. 修改ShowData组件渲染逻辑 #

从todo对象中取出你需要展示的具体字段，不要直接渲染整个对象，示例修改如下：

import React from "react";

const ShowData = ({ userData }) => {
    console.log("Here", userData);
    return (
        <>
            {userData.map((info, idx) => (
                <div className="user-data" key={info.id}>
                    待办ID：{info.id}，标题：{info.title}，是否完成：{info.completed ? '是' : '否'}
                </div>
            ))}
        </>
    );
};

export default ShowData;

可选优化项 #

• 给userData设置初始值为空数组，减少渲染时的可选判断：

  const [userData, setUserData] = useState([]);
  

• RefreshButton的点击事件可以直接绑定getData方法，不需要额外包裹箭头函数：

  <button className="fetch-data-button" onClick={getData}>
    Fetch new data
  </button>
  

• 列表渲染的key优先使用数据的唯一ID（即info.id），比数组索引更稳定，可避免列表更新时的渲染异常。

内容的提问来源于stack exchange，提问作者akashmodak97