從 React 伺服器操作返回 JSX

您知道 Next.js 伺服器操作可以傳回 JSX 標記而不是原始 JSON 資料嗎？

雖然文件中沒有明確提及，但我對它的運作方式感到驚訝。

例子

我有一個頁面，透過伺服器操作呈現使用者清單：

export default function Page() {
  async function loadUsersAction() {
    "use server";

    return [
      { name: "John", age: 30 },
      { name: "Jane", age: 25 },
      { name: "Doe", age: 40 },
    ];
  }

  return <UsersList loadUsersAction={loadUsersAction} />;
}

UsersList 元件透過點選按鈕載入使用者：

export default function UsersList({ loadUsersAction }) {
  const [users, setUsers] = useState();

  const onClick = async () => {
    const data = await loadUsersAction();
    setUsers(data);
  };

  return (
    <>
      <button onClick={onClick}>Load users</button>
      <ul>
        {users?.map((user) => (
          <li key={user.name}>
            {user.name} - {user.age}
          </li>
        ))}
      </ul>
    </>
  );
}

示範：

現在我更改伺服器操作以返回 帶有渲染用戶的 JSX:

async function loadUsersAction() {
  "use server";

  const users = [
    { name: "John", age: 30 },
    { name: "Jane", age: 25 },
    { name: "Doe", age: 40 },
  ];

  return (
    <ul>
      {users?.map((user) => (
        <li key={user.name}>
          {user.name} - {user.age}
        </li>
      ))}
    </ul>
  );
}

在 UsersList 元件中只渲染伺服器操作回應：

export default function UsersList({ loadUsersAction }) {
  const [users, setUsers] = useState();

  const onClick = async () => {
    const data = await loadUsersAction();
    setUsers(data);
  };

  return (
    <>
      <button onClick={onClick}>Load users</button>
      {users}
    </>
  );
}

在瀏覽器中一切都以相同的方式工作！

錯誤處理注意事項

如果伺服器操作拋出錯誤怎麼辦？當它返回 JSON 資料時，我們可以在操作中捕獲該錯誤並以自己的格式返回它，例如：

{ error: "my error" }

返回 JSX 時，我們可以讓錯誤拋出並在客戶端用最近的錯誤邊界捕獲它。根據 React 文檔，伺服器操作調用在

之外。組件應包裝到 Transition 中以進行正確的錯誤處理。
UsersList組件的最終程式碼：

export default function UsersList({ loadUsersAction }) {
  const [isPending, startTransition] = useTransition();
  const [users, setUsers] = useState();

  const onClick = () => {
    startTransition(async () => {
      const data = await loadUsersAction();
      setUsers(data);
    });
  };

  return (
    <>
      <button onClick={onClick}>Load users</button>
      {isPending ? <div>Loading users...</div> : users}
    </>
  );
}

此外，我利用 isPending 標誌在載入使用者時顯示訊息。

示範：

希望對您有幫助。
感謝您的閱讀並祝您編碼愉快！ ❤️

以上是從 React 伺服器操作返回 JSX的詳細內容。更多資訊請關注PHP中文網其他相關文章！