Next.js异步传数据给客户端组件状态未设置问题排查

核心问题 #

服务端组件传递的props名称和客户端组件接收的名称完全不匹配：

• 服务端组件传递的是 title、date、disc、content
• 客户端组件接收的是 _title、_date、_disc、_content

这直接导致客户端组件无法获取到传入的props值，自然无法初始化state并展示内容。

修复方案 #

方案1：修改客户端组件的props接收名称 #

让客户端组件的接收参数和服务端传递的名称一致：

"use client";

import { useState } from "react";

export default function Edit({ title, disc, content, date }) {
  // 若后续需要编辑数据，再用props初始化state；仅展示的话可直接用props
  const [titleState, setTitle] = useState(title);
  const [discState, setDisc] = useState(disc);
  const [contentState, setContent] = useState(content);
  const [dateState, setDate] = useState(date);

  return (
    <>
      <div className="blog-read">
        <h2>{titleState}</h2>
        <small>{dateState}</small>
        <p>
          <b>{discState}</b>
        </p>
        <p>{contentState}</p>
      </div>
    </>
  );
}

方案2：修改服务端组件的props传递名称 #

让服务端传递的参数名和客户端接收的一致：

export default async function Blog({ params }) {
  const id = params.id;
  const blog = await GetBlog(id);
  return (
    <>
      <Edit
        _title="test"
        _date={blog[0].date_c}
        _disc={blog[0].disc}
        _content={blog[0].content}
      />
    </>
  );
}

额外优化建议 #

如果只是单纯展示数据，不需要后续修改，完全没必要把props转成state，直接渲染props即可：

"use client";

export default function Edit({ title, disc, content, date }) {
  return (
    <>
      <div className="blog-read">
        <h2>{title}</h2>
        <small>{date}</small>
        <p>
          <b>{disc}</b>
        </p>
        <p>{content}</p>
      </div>
    </>
  );
}

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