Блог

Я использую next js, чтобы я мог получить SSR для страницы, отображаемой этим компонентом. Проблема в том, что у меня есть вызываемый компонент, который отображается путем перебора результатов из API. Проблема в том, что содержимое, отображаемое из этого компонента, не отображается в DOM. Как я могу заставить содержимое отображаться в DOM?

 /** @jsx jsx */
import { jsx } from 'theme-ui';
import { GetServerSideProps } from 'next';
import EntryComponent from 'src/components/hiphopleage/entry.component';
import { useEffect, useState } from 'react';
import { IPlaylist, IPlaylistItem, IProjectTrack } from 'src/_models/music.model';
import { uniqueId } from "lodash";
import { IPlayerItem } from 'src/_models/player.model';

const ViewLeagueComponent = (props) => {
   const [League, setLeague] = useState<IPlaylist>();
   const [Tracks, setTracks] = useState<IPlaylistItem[]>();
   const { PlayerState, dispatchPlayer } = useContext(PlayerContext);

   useEffect(() => {
     if (props.xleague.data) {
        setLeague(props.xleague.data.playlists[0]);
        setTracks(props.xleague.data.playlistSongs);
     }
   }, [props])


   return (
    <div sx={{ variant: "center", placeItems: "start center" }} className="col-12">
        <div className="col-12 col-md-10 py-3">
            {Tracks amp;amp; Tracks.map((x: IPlaylistItem, i: number) => <EntryComponent entry={x} index={i} key={uniqueId()} />)}
        </div>
    </div>
)
}

export default ViewLeagueComponent;

export const getServerSideProps: GetServerSideProps = async (ctx) => {
const league = await fetch(`${API_URL}/music/playlists?category=league`);
const xleague = await league.json();

return {
    props: {
        xleague
    }
}
  

}

Предполагая, что это не компонент страницы (в /pages ).

getServerSideProps, getStaticProps и getStaticPaths могут использоваться только для самих компонентов страницы, а не для обычных компонентов.