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

Question

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

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

main.client.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，因为它们在服务器上不可用。

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

main.server.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>)
}

如何正确分配数据数组(从fetch返回(，使其在服务器上呈现？

Answer 1

如果您使用Next.JS，可能需要使用使用客户端"在任何导入之前修复此问题。参见此示例：

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

希望它能帮助你。