从 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中文网其他相关文章！