如何实现客户端组件向服务端父组件传值且不使用useState等Hook？

针对你提到的场景（无需useState等客户端Hook、不依赖客户端内存状态），核心思路是让值直接流转到服务端层面，服务端父组件从服务端可访问的数据源（URL参数、数据库、缓存或服务端路由上下文）获取值，以下是具体可行方案：

1. 表单提交 + 服务端路由处理 #

客户端组件通过原生表单提交值到服务端路由，服务端处理后重定向到目标页面，服务端父组件从URL参数或服务端存储中读取值。

客户端组件（无需Hook） #

// 客户端组件：ClientComponent.jsx
'use client'

export default function ClientComponent() {
  return (
    <form action="/api/submit-value" method="POST">
      <input type="text" name="inputValue" placeholder="输入要传递的值" />
      <button type="submit">提交</button>
    </form>
  )
}

服务端路由处理 #

// app/api/submit-value/route.js
import { redirect } from 'next/navigation'
import { writeToDatabase } from '@/lib/db' // 自定义数据库操作函数

export async function POST(request) {
  const formData = await request.formData()
  const inputValue = formData.get('inputValue')
  
  // 可选：将值存入数据库/缓存，便于后续服务端组件读取
  await writeToDatabase('user_values', { value: inputValue })
  
  // 重定向到带参数的页面，服务端父组件可读取searchParams
  redirect(`/target-page?value=${encodeURIComponent(inputValue)}`)
}

服务端父组件 #

// app/target-page/page.jsx
export default async function TargetPage({ searchParams }) {
  // 直接从URL参数获取值，无需客户端状态
  const passedValue = searchParams.value
  
  // 或者从数据库读取：
  // const storedValue = await readFromDatabase('user_values')
  
  return (
    <div>
      <h1>服务端父组件获取的值：{passedValue}</h1>
    </div>
  )
}

2. 客户端原生导航携带URL参数 #

客户端组件用原生window.location跳转（无需useRouter Hook），服务端父组件直接读取URL查询参数。

客户端组件 #

// 客户端组件：ClientComponent.jsx
'use client'

export default function ClientComponent() {
  const handleNavigate = () => {
    const inputValue = document.getElementById('input').value
    window.location.href = `/target-page?value=${encodeURIComponent(inputValue)}`
  }

  return (
    <div>
      <input id="input" type="text" placeholder="输入值" />
      <button onClick={handleNavigate}>传递值到服务端组件</button>
    </div>
  )
}

服务端父组件 #

和上述TargetPage代码一致，直接从searchParams读取值即可。

3. 调用服务端Action（Next.js 13+） #

利用Next.js的Server Actions，客户端组件直接调用服务端函数传递值，服务端父组件可从服务端存储读取值。

定义Server Action #

// app/actions.js
'use server'

import { writeToCache } from '@/lib/cache' // 自定义缓存操作函数

export async function passValueToServer(value) {
  // 将值存入服务端缓存
  await writeToCache('temp_value', value)
  return { success: true }
}

客户端组件（无需useState） #

// 客户端组件：ClientComponent.jsx
'use client'

import { passValueToServer } from '@/app/actions'

export default function ClientComponent() {
  const handleSubmit = async () => {
    const inputValue = document.getElementById('input').value
    await passValueToServer(inputValue)
    // 提交后导航到服务端组件页面
    window.location.href = '/target-page'
  }

  return (
    <div>
      <input id="input" type="text" placeholder="输入值" />
      <button onClick={handleSubmit}>传递值</button>
    </div>
  )
}

服务端父组件 #

// app/target-page/page.jsx
import { readFromCache } from '@/lib/cache'

export default async function TargetPage() {
  // 从服务端缓存读取值
  const passedValue = await readFromCache('temp_value')
  
  return (
    <div>
      <h1>服务端获取的值：{passedValue}</h1>
    </div>
  )
}

核心逻辑总结 #

所有方案的本质都是绕过客户端内存状态，让值直接进入服务端可访问的渠道（URL、数据库、缓存），服务端父组件在渲染时直接从这些服务端数据源读取，完全不需要依赖客户端的useState或其他Hook。

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