React.ts 渲染了比之前渲染更多的钩子

Question

每次按下按钮时，我都会尝试获取一组新用户并更新现有用户。但是当我进入该页面时，它给了我

Rendered more hooks than during the previous render.

错误。我尝试了很多东西，但没有任何效果。这是我的代码。

import { useEffect, useState } from "react";
import { Server } from "../../server/auth";
import { useAppStore } from "../../zustand/store";
import UserCard from "./userCard";

export default function AdminPanel() {
  const [users, setUsers] = useState<Common.User[]>([]);
  const [offset, setOffset] = useState(0);
  const { authData, setAuthData } = useAppStore();
  const fetchUsers = async () => {
    const data = await Server.fetchUsers(offset, authData?.token);
    setUsers((state) => state.concat(data));
    setOffset(users.length);
  };
  useEffect(() => {
    fetchUsers();
  }, []);
  return (
    <section className="ap-bg bgw">
      <div className="users d-grid">
        {users.map((user, index) => UserCard(user, `u-${index}`))}
      </div>
      <button onClick={() => fetchUsers()}>Fetch 10 more users</button>
    </section>
  );
}

在这里我有 [users, setUsers]，这是当前用户的状态，[offset, setOffset] 这是我将从中获取的用户（即每次而不是获取 10 个用户，然后是 20 个用户，然后是 30 个用户等，我从 0 到 10 获取 10 个用户，然后从 10 到 20 获取 10 个用户并将它们添加到现有用户等），而 authData、setAuthData 是我的 zustand 存储。代码看起来是正确的，但我收到了错误。这里有什么错误，我该如何修复它？

Answer 1

我的问题更深层次，在 UserCard 内部，因为每个它都有一个附加状态，所以当我添加用户时，它添加了状态。已经解决了，谢谢大家！

Answer 2

<section className="ap-bg bgw">
  <div className="users d-grid">
    {users.map((user, index) =>  (
       <UserCard user={user} id={`u-${index}`} />
    ))}
  </div>
  <button onClick={() => fetchUsers()}>Fetch 10 more users</button>
</section>

这里而不是这个 => {users.map((user, index) => UserCard(user,

u-${index}

))}

使用上面的JSX组件调用，也可以解决问题。