1

我想在我的 Next.js 应用程序中集成一个搜索功能，它应该如下所示：

  • 用户在 Header 内的 searchBar 中键入关键字
  • 单击搜索按钮后，关键字应在 SearchResult 页面上传递，在该页面中我将其动态加载到 youtube-search-api 链接

结构如下所示：

  • Header.js（包含 SearchBar 组件）
  • _app.js（包含 Header 和组件）
  • SearchResults.js（在 pages 文件夹内，应该从 Header 中获取键入的关键字）

我用 zustand 试了一下，目前看起来像这样：

页眉.js：

import SearchBar from "./SearchBar";

const Header = () => {
  return (
    <div className={styles.header}>
...
      <SearchBar />
...
    </div>
  );
};

export default Header;

搜索栏.js：

import create from 'zustand';
import { useRouter } from 'next/router';
import Image from 'next/image';
import styles from '../styles/Header.module.scss';
import loupe from '../public/images/loupe.png';

const useStore = create((set) => ({
  keyword: '',
  setKeyword: (keyword) =>
    set((state) => ({
      ...state,
      keyword,
    })),
}));

const SearchBar = () => {
  const router = useRouter();
  const keyword = useStore((state) => state.keyword);
  const setKeyword = useStore((state) => state.setKeyword);

  const handleClick = (e) => {
    e.preventDefault();
    router.push('/searchResults');
  };

  return (
    <div className={styles.searchBar}>
      <input
        type='text'
        value={keyword}
        placeholder='Suche...'
        onChange={(e) => setKeyword(e.target.value)}
      />
      <button className={styles.searchBtn} type='submit' onClick={handleClick}>
        <Image src={loupe} alt='' />
      </button>
    </div>
  );
};

export default SearchBar;

_app.js：

import Header from '../components/Header';

function MyApp({ Component, pageProps }) {
  return (
    <>
        <Header /> 
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

和 SearchResults.js：

import { fetchData } from '../lib/utils';
import Moment from 'react-moment';
import { Modal } from 'react-responsive-modal';
import ReactPlayer from 'react-player/youtube';

export default function SearchResults({ videos }) {
  console.log(videos);

  const [modalIsOpen, setModalIsOpen] = useState(false);
  const [modalData, setModalData] = useState(null);

  const videoURL = 'https://www.youtube.com/watch?v=' + modalData;

  const sortedVids = videos
    .sort((a, b) =>
      Number(
        new Date(b.snippet.videoPublishedAt) -
          Number(new Date(a.snippet.videoPublishedAt))
      )
    )
    .filter((vid) => vid.snippet.title.toLowerCase());

  return (
    <>
      <div className={`${styles.playlist_container} ${styles.search}`}>
        <div className={styles.main_container}>
            <h1>Search results</h1>
          {sortedVids
            .filter((v) => v.snippet.title !== 'Private video')
            .map((vid, id) => {
              return (
                <div className={styles.item_container}
                  key={id}>
                  <div className={styles.clip_container}>
                    <Image
                      className={styles.thumbnails}
                      src={vid.snippet.thumbnails.medium.url}
                      layout='fill'
                      objectFit='cover'
                      alt={vid.snippet.title}
                    />
                    <button
                      className={styles.playBtn}
                      onClick={() => {
                        setModalData(vid.snippet.resourceId.videoId);
                        console.log(modalData);
                        setModalIsOpen(true);
                      }}
                    >
                      <Image src='/images/play.svg' width='60' height='60' />
                    </button>
                  </div>
                  <div className={styles.details_container}>
                    <h3>{vid.snippet.title}</h3>
                  </div>
                </div>
              );
            })}
        </div>
      </div>
      <div>
        <Modal
          open={modalIsOpen}
          onClose={() => setModalIsOpen(false)}
          center
          classNames={{
            overlay: 'customOverlay',
            modal: 'customModal',
            overlayAnimationIn: 'customEnterOverlayAnimation',
            overlayAnimationOut: 'customLeaveOverlayAnimation',
            modalAnimationIn: 'customEnterModalAnimation',
            modalAnimationOut: 'customLeaveModalAnimation',
          }}
          animationDuration={800}
        >
          <ReactPlayer
            playing={true}
            url={videoURL}
            width='100%'
            height='calc(100vh - 100px)'
            config={{
              youtube: {
                playerVars: {
                  autoplay: 1,
                  controls: 1,
                },
              },
            }}
          />
        </Modal>
      </div>
      <Footer />
    </>
  );
}

export async function getStaticProps() {
  const keyword = useStore((state) => state.keyword);

  const { YOUTUBE_KEY } = process.env;
  const uploadsURL = `https://youtube.googleapis.com/youtube/v3/search?part=snippet&channelId=UCbqKKcML7P4b4BDhaqdh_DA&maxResults=50&key=${YOUTUBE_KEY}&q=${keyword}`;

  async function getData() {
    const uploadsData = fetchData(uploadsURL);

    return {
      videos: await uploadsData,
    };
  }

  const { videos } = await getData();
  return {
    revalidate: 86400,
    props: {
      videos: videos.items,
    },
  };
}

有人可以通过告诉我我做错了什么以及它如何以正确的方式工作来帮助我吗？感谢你们！！

4

0 回答 0