React报错：Rendered more hooks than during the previous render原因求助

我知道这个问题可能被多次提问，但没找到需要的答案。以下是Task组件及GetData函数的代码，求解释错误原因。

Task组件代码 #

import Navbar from './Navbar';
import "./Idea.css";
import GetData from '../restApiMethods/GetData';
import React from "react";

function Task() {
    const ids = GetData("ideas/id");
    return (
        <div>
            <Navbar />
            <div className="idea-design">   
                <div className="container">
                    {
                        ids.map((id,index) => {
                            return (
                            <div key={index}>
                                {
                                GetData(`ideas/${id}`).map((task,index) => {
                                    return(
                                        <div key={index} className="row border border-secondary">
                                            <div className="col">
                                                <div> 
                                                    <p>{task.taskDescription}</p>
                                                </div>
                                            </div>
                                        </div>
                                    )
                                })
                                }
                            </div>
                            )
                        })
                    }
                </div>
                </div>
            </div>
      
      )
}

export default Task

GetData函数代码 #

import axios from "axios";
import {useState, useEffect}  from "react";

function GetData(data) {

    const [datas, setDatas] = useState([]);

    useEffect(() =>{ 
    const fetchData = () => {
    axios.get(`http://localhost:8080/api/${data}`).then(res =>{
    console.log(res);
    setDatas(res.data);
        });
    };
        fetchData();
    }, []);
      
    return datas;
}

export default GetData

错误原因 #

1. 违反React Hooks调用规则：GetData内部使用了useState和useEffect这两个React Hooks，但你把它当成普通函数调用，还放在了map循环内部执行。React要求Hooks必须在组件的顶层作用域调用，不能在循环、条件判断、嵌套函数中使用——因为React依赖Hooks的调用顺序来维护状态，循环调用会导致每次渲染时Hooks的调用数量和顺序不稳定。
2. Hook调用次数动态变化：当ids数组的长度发生变化时，循环内调用GetData的次数也会跟着改变，导致每次渲染时Hook的调用数量不一致，直接触发“Rendered more hooks than during the previous render”错误。

修复方案 #

步骤1：将GetData改为合法的自定义Hook

自定义Hook必须以use开头（React的强制约定），同时补充依赖项确保参数变化时重新请求：

// 重命名为useGetData，符合自定义Hook规范
import axios from "axios";
import {useState, useEffect}  from "react";

function useGetData(data) {
    const [datas, setDatas] = useState([]);

    useEffect(() =>{ 
        const fetchData = async () => {
            try {
                const res = await axios.get(`http://localhost:8080/api/${data}`);
                setDatas(res.data);
            } catch (err) {
                console.error('请求失败:', err);
            }
        };
        fetchData();
    }, [data]); // 添加data作为依赖，参数变化时重新发起请求
      
    return datas;
}

export default useGetData

步骤2：避免在循环中调用Hook

把循环内的逻辑抽成独立子组件，在子组件的顶层调用Hook：

// 新建TaskItem子组件
import React from "react";
import useGetData from '../restApiMethods/useGetData';

function TaskItem({ id }) {
    const tasks = useGetData(`ideas/${id}`);
    return (
        <div>
            {tasks.map((task, index) => (
                <div key={index} className="row border border-secondary">
                    <div className="col">
                        <div> 
                            <p>{task.taskDescription}</p>
                        </div>
                    </div>
                </div>
            ))}
        </div>
    );
}

export default TaskItem;

步骤3：修改Task组件调用子组件

import Navbar from './Navbar';
import "./Idea.css";
import useGetData from '../restApiMethods/useGetData';
import TaskItem from './TaskItem';
import React from "react";

function Task() {
    const ids = useGetData("ideas/id");
    return (
        <div>
            <Navbar />
            <div className="idea-design">   
                <div className="container">
                    {ids.map((id, index) => (
                        <TaskItem key={index} id={id} />
                    ))}
                </div>
            </div>
        </div>
    )
}

export default Task

这样修改后，每个TaskItem组件都在顶层调用useGetData，完全符合Hooks的调用规则，不会出现调用次数不稳定的问题。

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