是否有可能获得一个搜索词参数到getServerSideProps()?

我正在创建一个页面，在那里我可以得到我所有的笔记/总结的概述。

笔记的页面是标记文件转换成HTML在一个动态文件中使用(这个工作)。

在注释页(列出了所有注释)上，我想实现一个搜索函数:
我需要找到一种方法来将我的搜索输入值获取到getServerSideProps()中。这样，它可以过滤掉笔记，只显示你搜索的那些。

注意事项

当我改变字符串'searchTerm'在getServerSideProps()在笔记页的搜索功能工作。

const searchTerm = "" ;

我无法将getAllNotes()移出getServerSideProps()，因为数据文件的导入无法在客户端访问。

const allNotes = getAllNotes();

我知道搜索栏需要居中。

注释页代码:

import Head from 'next/head';
import Link from 'next/link';
import Footer from '../../components/Footer.js';
import Navigation from '../../components/Navigation';
import { Rating } from '@material-ui/core';
import Chip from '../../components/Chip.js';
import noteStyle from '../../styles/Notes.module.css';
import styles from '../../styles/Home.module.css';

import { getAllNotes } from '../../lib/data';
import Search from '../../components/Search';
export default function Notes({ notes }) {
return (
<div id="top" className={styles.container}>
<Head></Head>
<main className={styles.main}>
<section>
<Navigation />
</section>
<section className={noteStyle.noteSection}>
<h1>Notes & Summaries</h1>

<Search />
<div className={noteStyle.notes}>
{notes.map((note) => (
<Link key={note.slug} href={`/note/${note.slug}`}>
<a key={note.slug} className={noteStyle.noteCard}>
<h2 key="title">{note.title}</h2>
<h3 key="author">{note.author}</h3>
<p key="abstract">
{note.abstract}
</p>
<div className={noteStyle.aboutNote}>
<Rating key="rating" className={noteStyle.rating} name="half-rating-read" defaultValue={note.rating} precision={0.5} readOnly />
<Chip key="label" className={noteStyle.noteChip} bgColor={note.labelColors[0]} text={note.labelText[0]} icon={note.labelIcons[0]} />
</div>
</a>
</Link>
))}
</div>
</section>
</main>
<Footer />
</div>
)
}
export async function getServerSideProps() {
const allNotes = getAllNotes();
const searchTerm = "";
//Searches in title, author & abstract data field for a match with the query
const searchNotes = allNotes.filter((note) => {
return note.data.title.toLowerCase().includes(searchTerm.toLowerCase()) || note.data.author.toLowerCase().includes(searchTerm.toLowerCase()) || note.data.abstract.toLowerCase().includes(searchTerm.toLowerCase())
});

return {
props: {
//Here data serialising (dates, urls, ...),
notes: searchNotes.map(({ data, content, slug }) => ({
...data,
content,
slug,
})),
},
};
};

搜索组件代码:

import { useState } from 'react';
export default function Search() {
const [input, setInput] = useState('');
const search = (e) => {
setInput(e.target.value);
console.log("You searched", input);
}
return (
<div className={style.search}>
<SearchIcon className={style.search__inputIcon}/>
<input type="text" placeholder="Search for a note..." value={input} onChange={search} />
</div>
)
}

getAllNotes的代码(该函数将所有markdown文件转换为HTML):

import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';
const contentDirectory = path.join(process.cwd(), '_content');
export function getAllNotes() {
const allNotes = fs.readdirSync(contentDirectory);
return allNotes.map(fileName => {
const slug = fileName.replace('.md', '');
const fileContents = fs.readFileSync(
path.join(contentDirectory, fileName),
'utf-8'
)
const {content, data} = matter(fileContents);
return {
data,
content,
slug,
};  
})
}

创建页面时使用的研究:

https://www.youtube.com/watch?v=gQIv-biWxjo& t = 1291 s& ab_channel = HarryWolff
https://nextjs.org/docs/basic-features/data-fetching
https://medium.com/@matswainson building-a-search-component-for-your-next-js-markdown-blog-9e75e0e7d210

要使客户端代码中的值对getServerSideProps可用，可以在URL上传递带有router.push的查询参数。

// In your `Notes` or `Search` component
router.push('/notes?searchTerm=hello');

您可以从getServerSideProps中的查询参数访问该值。

export async function getServerSideProps(context) {
const searchTerm = context.query.searchTerm ?? "" // `context.query.searchTerm` would contain "hello"
// ...
}

相关内容

最新更新

热门标签：