gpt4 book ai didi

javascript - 是否可以将搜索词参数放入 getServerSideProps() 中?

转载 作者:行者123 更新时间:2023-12-04 17:12:51 25 4
gpt4 key购买 nike

我正在创建一个页面,我可以在其中概览我的所有笔记/摘要。

笔记的页面是转换为动态文件中使用的 HTML 的 markdown 文件(这可行)。

在笔记页面(列出所有笔记),我想实现一个搜索功能:
我需要找到一种方法将搜索输入的值获取到 getServerSideProps() 中。这样它就可以过滤掉笔记,只显示你搜索过的笔记。

注意事项:

  • 当我在注释页的 getServerSideProps() 中更改字符串“searchTerm”时,搜索功能起作用。
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,
};
})
}

我在构建页面时使用的研究:

最佳答案

要使来自客户端代码的值可用于 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"

// ...
}

关于javascript - 是否可以将搜索词参数放入 getServerSideProps() 中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69150064/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com