如何修复React中“Rendered more hooks than during previous render”错误？

你遇到的Rendered more hooks than during the previous render错误，核心原因是React Hook必须在组件顶层调用，不能放在循环、条件判断或嵌套函数里。要实现根据item.id获取数据并渲染的需求，有两种最实用的解决方案：

方案一：拆分子组件（推荐，符合React规范） #

把表格行的逻辑抽成独立组件，每个子组件可以合法使用Hook来请求对应item的数据，完全规避Hook调用规则问题。

代码修改步骤： #

1. 新增StoppageRow子组件，接收必要的props
2. 在子组件内部用useEffect请求当前item的详情
3. 原页面的循环中渲染这个子组件

import React, { useState, useEffect } from 'react';
import { TableRow, TableCell } from '@mui/material';
import CollectionActions from './components/CollectionActions';

// 定义子组件
const StoppageRow = ({ item, classes, t, setTimestamp }) => {
  const [itemDetails, setItemDetails] = useState(null);
  const [loadingDetails, setLoadingDetails] = useState(false);

  // 子组件内部合法调用Hook，根据item.id请求数据
  useEffect(() => {
    const fetchDetails = async () => {
      setLoadingDetails(true);
      try {
        // 替换成你的详情API地址
        const response = await fetch(`/api/stoppages/${item.id}`);
        if (response.ok) {
          setItemDetails(await response.json());
        } else {
          throw new Error(await response.text());
        }
      } catch (error) {
        console.error('获取详情失败:', error);
      } finally {
        setLoadingDetails(false);
      }
    };
    fetchDetails();
  }, [item.id]); // 依赖item.id，id变化时重新请求

  // 处理详情加载状态
  if (loadingDetails) {
    return <TableRow><TableCell colSpan={4}>加载中...</TableCell></TableRow>;
  }

  return (
    <TableRow key={item.id}>
      <TableCell>{item.name}</TableCell>
      <TableCell>{`Latitude: ${item.latitude}, Longitude: ${item.longitude}`}</TableCell>
      <TableCell>
        {/* 渲染从API获取的详情数据，示例假设返回了routes字段 */}
        {itemDetails ? itemDetails.routes.map(r => r.name).join(', ') : '暂无数据'}
      </TableCell>
      <TableCell className={classes.columnAction} padding="none">
        <CollectionActions itemId={item.id} editPath="/settings/stoppage" endpoint="stoppages" setTimestamp={setTimestamp} />
      </TableCell>
    </TableRow>
  );
};

// 原页面的TableBody部分替换为：
<TableBody>
  {!loading ? items.map((item) => (
    <StoppageRow 
      key={item.id} 
      item={item} 
      classes={classes} 
      t={t} 
      setTimestamp={setTimestamp} 
    />
  )) : (<TableShimmer columns={2} endAction />)}
</TableBody>

方案二：父组件批量预加载所有详情数据 #

如果不想拆组件，可以在父组件获取到items后，一次性批量请求所有item的详情，存储到状态中，渲染时直接取用。

代码修改（修改原页面的useEffectAsync）： #

useEffectAsync(async () => {
  setLoading(true);
  try {
    const response = await fetch('/api/stoppages');
    if (response.ok) {
      const itemsData = await response.json();
      // 批量请求所有item的详情
      const detailPromises = itemsData.map(item => 
        fetch(`/api/stoppages/${item.id}`).then(res => res.json())
      );
      const detailsList = await Promise.all(detailPromises);
      // 将详情与原item数据合并，方便渲染
      const itemsWithDetails = itemsData.map((item, index) => ({
        ...item,
        details: detailsList[index]
      }));
      setItems(itemsWithDetails);
    } else {
      throw Error(await response.text());
    }
  } finally {
    setLoading(false);
  }
}, [timestamp]);

渲染时直接使用合并后的数据： #

<TableCell>
  {item.details ? item.details.routes.map(r => r.name).join(', ') : '暂无数据'}
</TableCell>

注意：批量请求要考虑接口压力，如果items数量较多，建议后端提供批量查询接口，或者做分页处理。

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