在Next.js 13中使用Server Actions实现子组件向父组件状态提升

你当前的代码存在几个核心问题，导致状态无法正确从客户端子组件传递到服务器父组件，以及服务器组件无法处理客户端交互状态：

核心错误点 #

1. 子组件props接收错误：CategoryTab组件直接把参数当作update函数，但React组件接收的是props对象，应该解构获取回调。
2. 未触发父组件回调：handleClick里只是返回值，没有调用父组件传递的update函数，无法通知父组件状态变化。
3. 服务器组件无法持有客户端状态：父组件CourseList是服务器组件，不能直接使用未定义的category变量——服务器组件在服务端渲染，不具备客户端状态管理能力。
4. 服务器动作使用不规范：服务器动作需要单独定义为标注"use server"的async函数，不能直接嵌套在客户端事件回调中。

修复步骤 #

1. 修正客户端子组件CategoryTab #

确保正确接收回调函数，点击时主动通知父组件：

'use client';
import { useState } from 'react';
import styles from './CategoryTab.module.css';

export default function CategoryTab({ onCategoryChange }) {
  const [category, setCategory] = useState("all");

  const handleClick = (selectedCategory) => {
    setCategory(selectedCategory);
    // 调用父组件传递的回调，传递选中的分类
    onCategoryChange(selectedCategory);
  };

  return (
    <div className={styles.category_tab}>
      <ul>
        <li onClick={() => handleClick("all")}>All Courses</li>
        <li onClick={() => handleClick("doctorate")}>Doctorate Courses</li>
      </ul>
      <ul>
        <li onClick={() => handleClick("diploma")}>Diploma Courses</li>
        <li onClick={() => handleClick("certificate")}>Certificate Courses</li>
      </ul>
    </div>
  );
}

2. 方案一：将父组件改为客户端组件（简单直接） #

如果父组件不需要服务器渲染的特殊能力，改成客户端组件直接管理状态：

'use client';
import { useState } from 'react';
import CategoryTab from './CategoryTab';
import styles from './CourseList.module.css';

// 单独定义服务器动作
async function handleServerCategory(selectedCategory) {
  "use server";
  console.log("服务器端收到分类：", selectedCategory);
  // 这里可以添加服务器端逻辑，比如查询数据库、过滤课程等
  return selectedCategory;
}

export default function CourseList() {
  const [category, setCategory] = useState("all");

  const handleCategoryChange = async (selectedCategory) => {
    setCategory(selectedCategory);
    // 调用服务器动作处理业务逻辑
    await handleServerCategory(selectedCategory);
  };

  return (
    <section className={styles.courses_container}>
      <h1>programmes</h1>
      <h2>Below are the different available programmes at XYZ</h2>
      <CategoryTab onCategoryChange={handleCategoryChange} />
      {/* 根据状态渲染对应内容 */}
      {category === "all" && <p>all</p>}
      {category === "doctorate" && <p>doctorate</p>}
      {category === "diploma" && <p>diploma</p>}
      {category === "certificate" && <p>certificate</p>}
    </section>
  );
}

3. 方案二：保留父组件为服务器组件 #

如果父组件必须是服务器组件，把状态管理和交互部分拆分到客户端子组件中：

新建客户端组件CourseContent.jsx

'use client';
import { useState } from 'react';
import CategoryTab from './CategoryTab';

async function handleServerCategory(selectedCategory) {
  "use server";
  console.log("服务器端处理分类：", selectedCategory);
  // 服务器端业务逻辑
  return selectedCategory;
}

export default function CourseContent() {
  const [category, setCategory] = useState("all");

  const handleCategoryChange = async (selectedCategory) => {
    setCategory(selectedCategory);
    await handleServerCategory(selectedCategory);
  };

  return (
    <>
      <CategoryTab onCategoryChange={handleCategoryChange} />
      {category === "all" && <p>all</p>}
      {category === "doctorate" && <p>doctorate</p>}
      {category === "diploma" && <p>diploma</p>}
      {category === "certificate" && <p>certificate</p>}
    </>
  );
}

父服务器组件CourseList.jsx

import CourseContent from './CourseContent';
import styles from './CourseList.module.css';

export default function CourseList() {
  return (
    <section className={styles.courses_container}>
      <h1>programmes</h1>
      <h2>Below are the different available programmes at XYZ</h2>
      {/* 引入客户端组件处理交互和状态 */}
      <CourseContent />
    </section>
  );
}

关键注意事项 #

• 服务器组件只能渲染内容，无法处理客户端交互状态，必须由'use client'标记的客户端组件管理状态和事件。
• 服务器动作必须是单独的async函数，标注"use server"，不能直接嵌套在客户端组件的事件回调中。
• 组件间传递状态通过回调函数实现，子组件调用父组件传递的回调来通知状态变化。

内容的提问来源于stack exchange，提问作者DevolamiTech