如果 React 服务器组件不支持 useState，我们如何分配组件状态以进行渲染

Question

我试图了解 React 服务器组件以及如何在不使用 useState 和 useEffect 的情况下渲染组件状态。我创建了一个带有嵌入式客户端组件的服务器组件，两者都获取少量数据并显示为 JSON。

客户端组件按预期工作并呈现从 API 获取的 json 数据。

主客户端.tsx

import { useEffect, useState } from "react"

export default function Main() {
    let [data, setData] = useState(undefined);

    async function fetchData() {
        let value = await fetch("https://jsonplaceholder.typicode.com/posts");
        let result = await value.json();
        let slice = result.slice(0,2);
        return slice;
    }

    useEffect(()=>{
        fetchData().then(value => {
            setData(value);
            console.log("data", data)
        });
    }, [])

    return (<div className="component">
        <h1>Client Main</h1>
        {data &&
            <div>
                <pre>
                    {JSON.stringify(data, null, 2)}
                </pre>
            </div>
        }
    </div>)
}

服务器组件不会重新渲染 json 数据。它基本上是客户端代码的副本，没有 useEffect、useRef 和 useState，因为它们在服务器上不可用。

它呈现初始化的数据，但不呈现获取的数据。

主服务器.tsx

import Client from "../components/main.client"

export default function Main() {
    let data = {key: "initial value"};
    let hello = "hello world";
    
    async function fetchData() {
        let value = await fetch("https://jsonplaceholder.typicode.com/posts");
        let result = await value.json();
        let slice = result.slice(0,2);
        return slice;
    }

    fetchData().then(value => {
        data = [...value];
        console.log("data", data)
    });

    return (<div className="component">
        <h1>Server Main</h1>
        {hello}
        {data &&
            <div>
                <pre>
                    {JSON.stringify(data, null, 2)}
                </pre>
            </div>
        }
        <Client/>
    </div>)
}

我如何正确分配数据数组（从获取返回）以便它在服务器上呈现？

Answer 1

如果您使用 Next.JS，则可能需要使用“'use client';” 在任何导入之前解决此问题。看这个例子：

"use client";
import { useState } from "react";
import Image from "next/image";
import { Inter } from "@next/font/google";

希望对您有帮助。