React中 的可序列化属性支持 Promise是 如何实现的?

Question

"use client";
import { useState, useTransition, useRef } from "react";
import { updateName } from "@/app/lib/demoActions";
import FancyText from "@/app/ui/FancyText";
export default function Page() {
  const nameInputRef = useRef<HTMLInputElement>(null);
  const [name, setName] = useState("");
  const [res, setRes] = useState("");
  const [error, setError] = useState("");
  const [isPending, startTransition] = useTransition();

  const submitAction = async (formData: FormData) => {
    startTransition(async () => {
      const { error, products, promiseProp } = await updateName(
        formData.get("name") as string
      );
      if (products) {
        setRes(products);
        const promRes = await promiseProp;
        console.log("promRes", promRes);
      }
      if (error) {
        setError(error);
      } else {
        setName("");
      }
    });
  };
  return (
    <>
      <FancyText title="title" text="text"></FancyText>
      <form action={submitAction}>
        <input
          type="text"
          name="name"
          disabled={isPending}
          ref={nameInputRef}
        ></input>
        {error && <p>{error}</p>}
        {res && <p>{JSON.stringify(res)}</p>}
      </form>
    </>
  );
}

'use server'
export async function updateName(name: string) {
    if (!name) {
        return {
            error: " name is required!"
        }

    }

    const response = await fetch('https://dummyjson.com/products')
        .then(res => res.json())
    console.log('response', response)
    const promiseProp = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("success")
        }, 10000)

    })
    response.promiseProp = promiseProp

    return response;

}

在上面的代码中 form提交的时候会执行 ssr updateName, 其中这个updateName函数的返回值有一个 promiseProp属性. promise 延迟了10秒 resolve.

问题 如何解释下面这个现象?

首先我们看到 请求 状态码变成200 且请求返回值中有 两个属性.
然后10秒后 突然请求变成了三个属性. 为啥会突变? 请求不是已经结束了吗?
![上传中...]()