Нужно открыть список, который генерируется на сервере next js

Question

я пишу сайт на next JS и столкнулся со следующей проблемой в данном компоненте мне нужно при нажатии на кнопку открыть список пользователей, которые вызываются в другом файле с помощью fetch

/page.tsx

'use client';

export default  function TeamTable() {
    const [show, setShow] = useState(false);
    const showTeam = () => {
        setShow(curr => !curr)
    }
     return (
         <div>
                 <button
                     type="button"
                     onClick={showTeam}
                 >
                     смотреть всех
                 </button>
                  
                 { show && <GroupComponents />}
         </div>
    )
}

/group.tsx

async function getData() {
    const res = await fetch(
        `url`,
        {
            method: 'GET',
        }
    )

    if (!res.ok) {
        throw new Error('Failed to fetch data')
    }

    return res.json()
}

export default async function GroupComponents() {
    const directors = await getData();
    return (
        <>
            {
                directors.data.map(director =>
                    <div key={director.name}>
                        {director.name}
                    </div>
                )
            }
        </>
    );
}

при выполнении данного кода получаю Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding 'use client' to a module that was originally written for the server.

подскажите, что я делаю не так и как можно осуществить данную функцию?

Answer 1

/page.tsx

import { TeamTable } from @/src/components/team-table/team-table;

export default async function TablePage() {
   return <TeamTable />
}

/src/components/team-table/team-table.tsx

'use client';

import { GroupComponents } from @/src/components/group-components/group-components;

export const TeamTable = () => {
    const [show, setShow] = useState(false);
    const showTeam = () => {
        setShow(curr => !curr)
    }
     return (
         <div>
              <button
                     type="button"
                     onClick={showTeam}
                 >
                     смотреть всех
                 </button>
                  
                 { show && <GroupComponents />}
         </div>
    )
}

/src/components/group-components/group-components.tsx

'use client';

import { getData } from @/src/utils/api/get-data.tsx;

export const GroupComponents = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [directors, setDirectors] = useState([]);
  useEffect(() => {
    getData().then((res) => {
      setDirectors(res);
      setIsLoading(false);
    });
  }, []);
  return isLoading ? (
    <Preloader />
  ) : (
    directors.map((director) => <div key={director.id}>{director.name}</div>)
  );
};

src/utils/api/get-data.tsx;

export const getData = async() => {
    const res = await fetch(
        `url`,
        {
            method: 'GET',
        }
    )

    if (!res.ok) {
        throw new Error('Failed to fetch data')
    }

    return res.json()
}

БЛОГ НА HUSL

Нужно открыть список, который генерируется на сервере next js

Ответы (1 шт):