第 8 步：留下评价
本课属于 Coddy React 学习旅程的“Next.js 基础”单元。第 46 课，共 47 课。
挑战
中等让大家可以评价菜品。
- 补全文件
app/actions.js，以'use server';开头，并导出async function addReview(formData)。 - 从表单数据中读取
slug和text，忽略空的text，然后调用await addReviewToDb(slug, text)，并调用来自next/cache的revalidatePath('/menu/' + slug)。 - 在菜品页面中，调用
await getReviews(slug)，并在.detail文章元素下方添加一个<section>。 - 其中包含
<form id="review-form" action={addReview}>，以及一个携带 slug 的隐藏输入框name="slug"、一个文本输入框id="review-input" name="text"，还有<button id="review-submit" type="submit">。 - 在表单下方渲染
<ul id="review-list" className="reviews">，每条评价对应一个<li>，并为其设置id={'review-' + index}。
亲手试试
import Link from 'next/link';
import './globals.css';
export const metadata = {
title: {
default: 'Coddy Eats',
template: '%s | Coddy Eats',
},
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<nav className="nav">
<Link className="brand" href="/">Coddy Eats</Link>
<Link id="nav-menu" href="/">Menu</Link>
<Link id="nav-desserts" href="/?category=dessert">Desserts</Link>
</nav>
<div className="container">
{children}
</div>
</body>
</html>
);
}Next.js 基础中的所有课
8项目：Coddy Eats
第 1 步：页面框架第 2 步：菜单网格
第 3 步：菜品页面第 4 步：加载状态第 5 步：页面标题第 6 步：加入购物车第 7 步：分类筛选第 8 步：留下评价第 9 步：实时搜索